/* ============================================================
   DESIGN TOKENS
   ============================================================ */
    :root {
      /* brand: circuitBlue */
      --blue-10: #f4f7ff;
      --blue-50: #e9efff;
      --blue-100: #d4e0ff;
      --blue-200: #a9c0ff;
      --blue-300: #7093ff;
      --blue-400: #2f64ff;
      --blue-500: #0047ff;
      --blue-600: #0039cc;
      --blue-700: #002ea6;
      --blue-800: #00237f;
      --blue-900: #001a5e;
      --blue-dark1: #1a1a1a;
      --blue-dark2: #060606;

      /* neutrals */
      --gray-0: #fff;
      --gray-10: #fbfafa;
      --gray-50: #f3f3f3;
      --gray-100: #ebebeb;
      --gray-200: #dcdcdc;
      --gray-300: #c4c4c4;
      --gray-400: #a0a0a0;
      --gray-500: #8a8a8a;
      --gray-600: #717171;
      --gray-700: #4a4a4a;
      --gray-800: #2f2b2c;
      --gray-900: #231f20;

      /* accents */
      --green-100: #d8f0ea;
      --green-300: #0aa07f;
      --green-500: #04735b;
      --orange-200: #ffd58a;
      --orange-500: #f06516;
      --red-200: #ffc3b6;
      --red-500: #f03016;
      --teal-200: #c3e6ec;
      --teal-500: #76cdd8;

      /* EPAM accents. Light mode runs on one gradient: cyan-blue to blue to purple. */
      --sp-cyan: #0078c2;
      --sp-blue: #0047ff;
      --sp-violet: #8453d2;
      --sp-magenta: #8453d2;
      --sp-indigo: #0047ff;
      --sp-green: #0078c2;
      --sp-lime: #76cdd8;
      --sp-teal: #76cdd8;
      --sp-amber: #fec010;
      --sp-orange: #f06516;
      --sp-red: #f03016;
      /* dark-mode accents, used on EPAM's near-black sections */
      --sp-mint: #00ffd3;
      --sp-cyan-bright: #00f6ff;
      --sp-purple-light: #b896ff;
      /* readable ink versions, for type on light grounds */
      --ink-blue: #0047ff;
      --ink-indigo: #0047ff;
      --ink-cyan: #00629f;
      --ink-green: #00629f;
      --ink-violet: #6a3fb0;
      --ink-magenta: #6a3fb0;
      --ink-orange: #b04708;
      /* EPAM's signature gradients, lifted verbatim */
      --epam-gradient-light: linear-gradient(118.82deg, #0078c2 .5%, #0047ff 47.33%, #8453d2 76.12%);
      --epam-gradient-inline: linear-gradient(90.38deg, #0078c2 .5%, #0047ff 47.33%, #8453d2 90.12%);
      --epam-gradient-dark: linear-gradient(90.02deg, #00ffd3 43.66%, #00f6ff 68.56%, #b896ff 94.34%);

      /* semantic */
      --bg-neutral: var(--gray-0);
      --bg-gray-1: var(--gray-10);
      --bg-gray-2: var(--gray-50);
      --bg-gray-3: var(--gray-100);
      --bg-inverted-brand-neutral: var(--blue-dark2);
      --bg-inverted-brand-bright: var(--blue-800);
      --text-strong: var(--gray-900);
      --text-neutral: var(--gray-600);
      --text-muted: var(--gray-500);
      --text-dimmed: var(--gray-900);
      --text-inv-strong: var(--gray-0);
      --text-inv-neutral: var(--gray-100);
      --text-inv-muted: var(--gray-300);
      --text-inv-brand: var(--blue-400);
      --border-dimmed: var(--gray-100);
      --border-neutral: var(--gray-200);
      --border-strong: var(--gray-300);
      --border-transparent: color-mix(in oklab, var(--gray-900) 8%, transparent);
      --border-inv: color-mix(in oklab, var(--blue-100) 20%, transparent);

      /* type */
      /* EPAM's own stack: museo-sans first (Typekit), Source Sans as their declared fallback */
      --font-sans: 'museo-sans', 'Source Sans 3', 'Source Sans Pro', arial, helvetica, sans-serif;

      /* chrome */
      --header-height: 3.5rem;
      --container-max: 1280px;
      --container-pad: 1.5rem;
      --shadow-base: 0 0 0 1px #141a270d, 0 1px 3px 0 #141a271a, 0 1px 2px -1px #141a271a;
      --shadow-lg: 0 0 0 1px #141a270d, 0 10px 15px -3px #141a271a, 0 4px 6px -4px #141a271a;
      --shadow-xl: 0 0 0 1px #141a270d, 0 20px 25px -5px #141a2721, 0 8px 10px -6px #141a271a;
      --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
    }

    @media (min-width:1024px) {
      :root {
        --header-height: 4.375rem;
      }
    }

    @media (min-width:1280px) {
      :root {
        --container-pad: 2rem;
      }
    }

    /* ============================================================
   RESET / BASE
   ============================================================ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--header-height) + 1rem);
    }

    body {
      margin: 0;
      font-family: var(--font-sans);
      /* EPAM body: font:1.7rem/1.5 ... ; letter-spacing:.085rem */
      font-size: 17px;
      line-height: 1.5;
      letter-spacing: .85px;
      font-variant-numeric: lining-nums proportional-nums;
      background: var(--bg-neutral);
      color: var(--text-strong);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    ul,
    ol,
    dl {
      margin: 0;
    }

    ul,
    ol {
      padding: 0;
      list-style: none;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select {
      font: inherit;
      color: inherit;
    }

    img,
    svg {
      display: block;
      max-width: 100%;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    :focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--gray-0), 0 0 0 4px var(--sp-blue);
      border-radius: 8px;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ============================================================
   TYPE SCALE
   Sizes are EPAM's own, read off epam-core-internal + landing23.
   Their html is 62.5% so 1rem = 10px there; written here in px.
     h1  3.4rem/4.3rem w300 ls .2rem   -> 768: 4.1/5.1  -> 992: 5.4/6.9
     h2  2.9rem/3.4rem w900            -> 992: colctrl override 2.8/3.6 ls 1px
     h3  colctrl 1.9rem/2.6rem w900    -> 992: 2.5rem/3.4rem
     h4  2.2rem/2.6rem w900            -> 992: 2.5rem/3.4rem
     body 1.7rem/1.5 ls .085rem
   Sizes follow EPAM. Weights do not go below 400 by house rule, so EPAM's
   w300 h1 and their w100/w300 display numerals are floored at 400 here.
   Exception: h2 (.t-large) is fixed at 50px / weight 300 by explicit request.
   ============================================================ */
    .t-xlarge {
      font-size: 60px;
      line-height: 66px;
      letter-spacing: 2px;
      font-weight: 400;
    }

    .t-large {
      font-size: 60px;
      line-height: 66px;
      letter-spacing: 1px;
      font-weight: 300;
    }

    .t-base {
      font-size: 22px;
      line-height: 26px;
      letter-spacing: 0;
      font-weight: 900;
    }

    .t-small {
      font-size: 19px;
      line-height: 26px;
      letter-spacing: 0;
      font-weight: 900;
    }

    .b-2xlarge {
      font-size: 18px;
      line-height: 27px;
      letter-spacing: .85px;
      font-weight: 400;
    }

    .b-xlarge {
      font-size: 18px;
      line-height: 24px;
      letter-spacing: .85px;
      font-weight: 700;
    }

    .b-large {
      font-size: 17px;
      line-height: 26px;
      letter-spacing: .85px;
      font-weight: 600;
    }

    .b-base {
      font-size: 17px;
      line-height: 26px;
      letter-spacing: .85px;
      font-weight: 400;
    }

    .b-base-strong {
      font-size: 17px;
      line-height: 26px;
      letter-spacing: .85px;
      font-weight: 700;
    }

    .b-small {
      font-size: 14px;
      line-height: 20px;
      letter-spacing: .5px;
      font-weight: 400;
    }

    .b-small-strong {
      font-size: 14px;
      line-height: 20px;
      letter-spacing: .5px;
      font-weight: 700;
    }

    @media (min-width:1024px) {
      .t-base {
        font-size: 25px;
        line-height: 34px;
      }

      .t-small {
        font-size: 22px;
        line-height: 30px;
      }

      .b-2xlarge {
        font-size: 20px;
        line-height: 30px;
      }

      .b-xlarge {
        font-size: 18px;
        line-height: 24px;
      }

      .b-large {
        font-size: 18px;
        line-height: 26px;
      }
    }

    .balance {
      text-wrap: balance;
    }

    /* EPAM highlights a phrase inside the headline with the brand gradient */
    .grad {
      background-image: var(--epam-gradient-inline);
      background-size: 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      display: inline;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      font-weight: 600;
    }

    .grad-dark {
      background-image: var(--epam-gradient-dark);
    }

    .muted {
      color: var(--text-neutral);
    }

    .dimmed {
      color: var(--text-dimmed);
    }

    .tnum {
      font-variant-numeric: tabular-nums;
    }


    /* accent scopes: set --acc (vivid) and --acc-ink (readable) on any container */
    .acc-blue {
      --acc: var(--sp-blue);
      --acc-ink: var(--ink-blue);
    }

    .acc-cyan {
      --acc: var(--sp-cyan);
      --acc-ink: var(--ink-cyan);
    }

    .acc-violet {
      --acc: var(--sp-violet);
      --acc-ink: var(--ink-violet);
    }

    /* aliases, so section markup keeps working while the palette narrows to EPAM's three */
    .acc-green {
      --acc: var(--sp-cyan);
      --acc-ink: var(--ink-cyan);
    }

    .acc-magenta {
      --acc: var(--sp-violet);
      --acc-ink: var(--ink-violet);
    }

    .acc-indigo {
      --acc: var(--sp-blue);
      --acc-ink: var(--ink-blue);
    }

    .acc-orange {
      --acc: var(--sp-orange);
      --acc-ink: var(--ink-orange);
    }

    /* the spectrum mesh, for dark grounds */
    .mesh {
      background-color: var(--blue-dark2);
      background-image:
        radial-gradient(58% 78% at 10% 6%, color-mix(in oklab, var(--sp-magenta) 62%, transparent), transparent 68%),
        radial-gradient(52% 66% at 74% 8%, color-mix(in oklab, var(--sp-orange) 50%, transparent), transparent 68%),
        radial-gradient(66% 88% at 88% 82%, color-mix(in oklab, var(--sp-blue) 70%, transparent), transparent 70%),
        radial-gradient(58% 72% at 26% 96%, color-mix(in oklab, var(--sp-green) 52%, transparent), transparent 70%),
        radial-gradient(46% 60% at 50% 45%, color-mix(in oklab, var(--sp-violet) 46%, transparent), transparent 72%);
    }

    /* ============================================================
   LAYOUT
   ============================================================ */
    .container {
      width: 100%;
      max-width: var(--container-max);
      margin-inline: auto;
      padding-inline: var(--container-pad);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: 1rem;
    }

    @media (min-width:640px) {
      .grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: 1.5rem;
      }
    }

    .col-full {
      grid-column: 1/-1;
    }

    .section {
      padding-block: 4rem;
    }

    .section-lead {
      padding-top: 5rem;
      padding-bottom: 4rem;
    }

    @media (min-width:1024px) {
      .section {
        padding-block: 8rem;
      }

      .section-lead {
        padding-top: 10rem;
        padding-bottom: 8rem;
      }
    }

    .bg-gray2 {
      background: var(--bg-gray-2);
    }

    #why>.container {
      padding-top: 4.5rem;
      padding-bottom: 4rem;
    }

    @media (min-width:1024px) {
      #why>.container {
        padding-top: 8rem;
      }
    }

    .border-top {
      border-top: 1px solid var(--border-neutral);
    }

    /* Spoke's signature band: a fading vertical rule with a dot marker */
    .band {
      position: relative;
      padding-left: 1.5rem;
      border-left: 1px solid;
      border-image-slice: 1;
      border-image-source: linear-gradient(to bottom, var(--gray-200), #DCE2EE00);
    }

    @media (min-width:1024px) {
      .band {
        padding-left: 2.5rem;
      }
    }

    /* ============================================================
   BUTTONS
   ============================================================ */
    /* Modelled on EPAM's .cta-button-ui / .cta-button-ui-23: a pill with a 2px
   gradient ring, micro uppercase label at .2em, inverting its fill on hover.
   EPAM draws the ring with a z-index:-1 pseudo-element; a two-layer background
   clipped padding-box/border-box gives the same result without depending on
   the ancestor stacking context. The fill is a registered custom property so
   it can transition the way theirs does. */
    @property --btn-fill {
      syntax: '<color>';
      inherits: false;
      initial-value: transparent;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      height: 38px;
      padding-inline: 20px;
      border: 2px solid transparent;
      border-radius: 26px;
      cursor: pointer;
      background-repeat: no-repeat;
      font-size: 12px;
      line-height: 1;
      letter-spacing: .2em;
      font-weight: 900;
      text-transform: uppercase;
      text-indent: .2em;
      --btn-fill: transparent;
      background-image: linear-gradient(var(--btn-fill), var(--btn-fill));
      background-origin: border-box;
      background-clip: padding-box;
      transition: --btn-fill .3s linear, color .3s linear, border-color .3s linear;
      white-space: nowrap;
    }

    .btn-lg {
      height: 48px;
      padding-inline: 28px;
    }

    /* long labels that must sit on one line would overflow their column */
    .btn-block {
      white-space: normal;
      height: auto;
      min-height: 38px;
      padding-block: 11px;
      text-align: center;
    }

    /* primary, on light grounds: near-white fill, brand gradient ring */
    .btn-primary {
      --btn-fill: var(--gray-10);
      color: var(--blue-dark2);
      background-image: linear-gradient(var(--btn-fill), var(--btn-fill)), var(--epam-gradient-inline);
      background-clip: padding-box, border-box;
    }

    .btn-primary:hover {
      --btn-fill: var(--blue-dark2);
      color: var(--gray-0);
    }

    /* secondary, on light grounds: EPAM's plain bordered variant */
    .btn-grey {
      color: var(--gray-900);
      border-color: var(--gray-300);
    }

    .btn-grey:hover {
      --btn-fill: var(--gray-900);
      color: var(--gray-0);
      border-color: var(--gray-900);
    }

    /* the same pair on dark grounds, where EPAM swaps to its dark gradient */
    .btn-inv-primary,
    .hero .btn-primary,
    .inverted .btn-primary {
      --btn-fill: var(--blue-dark2);
      color: var(--gray-0);
      background-image: linear-gradient(var(--btn-fill), var(--btn-fill)), var(--epam-gradient-dark);
      background-clip: padding-box, border-box;
    }

    .btn-inv-primary:hover,
    .hero .btn-primary:hover,
    .inverted .btn-primary:hover {
      --btn-fill: var(--gray-0);
      color: #000;
    }

    .btn-inv-grey {
      color: var(--gray-100);
      border-color: rgba(255, 255, 255, .35);
    }

    .btn-inv-grey:hover {
      --btn-fill: var(--gray-0);
      color: var(--blue-dark2);
      border-color: var(--gray-0);
    }

    .btn-arrow {
      transition: transform .15s var(--ease-out-quart);
      text-indent: 0;
    }

    .btn:hover .btn-arrow {
      transform: translateX(2px);
    }

    /* ============================================================
   HEADER
   ============================================================ */
    .header {
      position: fixed;
      inset-inline: 0;
      top: 0;
      z-index: 90;
      height: var(--header-height);
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--gray-0);
      border-bottom: 1px solid var(--border-neutral);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: var(--container-max);
      padding-inline: var(--container-pad);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: .5rem;
      font-weight: 700;
      letter-spacing: -.3px;
      font-size: 19px;
    }

    .logo-mark {
      width: 26px;
      height: 26px;
      flex: none;
    }

    .nav-desktop {
      display: none;
    }

    @media (min-width:1024px) {
      .nav-desktop {
        display: flex;
        align-items: center;
        gap: 1.75rem;
        margin-left: 2.5rem;
        margin-right: auto;
      }
    }

    .nav-link {
      font-size: 17px;
      letter-spacing: .85px;
      font-weight: 600;
      color: var(--gray-700);
      transition: color .1s ease-out;
    }

    .nav-link:hover {
      color: var(--gray-900);
    }

    .header-actions {
      display: none;
      gap: .5rem;
      align-items: center;
    }

    @media (min-width:1024px) {
      .header-actions {
        display: flex;
      }
    }

    .menu-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 10px;
      cursor: pointer;
      background: color-mix(in oklab, var(--blue-dark1) 8%, transparent);
      color: var(--blue-dark1);
    }

    @media (min-width:1024px) {
      .menu-toggle {
        display: none;
      }
    }

    .mobile-menu {
      position: fixed;
      inset: var(--header-height) 0 0 0;
      z-index: 89;
      background: var(--gray-0);
      padding: 1.5rem;
      display: none;
      flex-direction: column;
      gap: .25rem;
      overflow-y: auto;
    }

    .mobile-menu[data-open="true"] {
      display: flex;
    }

    .mobile-menu a.nav-link {
      padding-block: .875rem;
      border-bottom: 1px solid var(--border-dimmed);
      font-size: 18px;
    }

    .mobile-menu .mobile-cta {
      display: flex;
      gap: .75rem;
      margin-top: 1.5rem;
    }

    .mobile-menu .mobile-cta .btn {
      flex: 1;
    }

    /* ============================================================
   HERO
   ============================================================ */
    /* Hero runs on a full-bleed video. The ground and the glow underneath are what
   show while the file loads, when autoplay is refused, and under reduced motion. */
    .hero {
      background-color: var(--blue-dark2);
      color: var(--text-inv-neutral);
      padding-top: var(--header-height);
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }

    /* The hero used to be purely content-driven, about 660px on a desktop
       viewport. --hero-min-h holds it well above that. It is a floor, not a
       fixed height, so longer copy still grows the section. Tune this one value
       to change how tall the hero runs. */
    @media (min-width:1024px) {
      .hero {
        --hero-min-h: 1240px;
        min-height: var(--hero-min-h);
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    .hero-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
      background-color: var(--blue-dark2);
      background-image:
        radial-gradient(46% 60% at 64% 44%, color-mix(in oklab, var(--sp-cyan-bright) 22%, transparent), transparent 72%),
        radial-gradient(42% 54% at 80% 72%, color-mix(in oklab, var(--sp-purple-light) 20%, transparent), transparent 72%);
    }

    /* object-fit does the responsive work: the frame always fills the hero box,
   at any viewport ratio, and stays centred on the particle cluster. */
    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      border: 0;
    }

    .hero-scrim {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(180deg, rgba(6, 6, 6, .86) 0%, rgba(6, 6, 6, .72) 42%, rgba(6, 6, 6, .58) 100%);
    }

    @media (min-width:1024px) {

      /* on wide screens the copy sits left, so the scrim clears the right-hand particles */
      .hero-scrim {
        background-image: linear-gradient(90deg, rgba(6, 6, 6, .9) 0%, rgba(6, 6, 6, .72) 38%, rgba(6, 6, 6, .3) 72%, rgba(6, 6, 6, .12) 100%);
      }
    }

    /* very tall/narrow viewports crop hard, so favour the upper half of the frame */
    @media (max-aspect-ratio:3/4) {
      .hero-video {
        object-position: center 38%;
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .hero-video {
        display: none;
      }
    }

    .hero>.container {
      position: relative;
      z-index: 1;
    }

    /* hero type inverts onto the video */
    .hero h1 {
      color: var(--gray-0);
    }

    .hero .hero-lede {
      color: var(--gray-300);
    }

    .hero .hero-note {
      color: var(--gray-400);
    }

    .hero .rot>span {
      color: var(--gray-300);
    }

    .hero .rot[data-active="true"]>span {
      color: var(--gray-0);
    }

    .hero .rot i {
      background: rgba(255, 255, 255, .26);
    }

    .hero .rot i b {
      background: var(--gray-0);
    }

    .hero .field {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .3);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .hero .field:hover {
      border-color: rgba(255, 255, 255, .5);
    }

    .hero .field:focus-within {
      border-color: var(--sp-cyan-bright);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--sp-cyan-bright) 26%, transparent);
    }

    .hero .field input {
      color: var(--gray-0);
    }

    .hero .field input::placeholder {
      color: rgba(255, 255, 255, .58);
    }

    .hero-grid {
      row-gap: 3rem;
      padding-block: 4rem;
      align-items: center;
    }

    @media (min-width:1024px) {
      .hero-grid {
        row-gap: 2.5rem;
        padding-top: 4rem;
        padding-bottom: 8rem;
      }
    }

    .hero-copy {
      grid-column: 1/-1;
    }

    @media (min-width:640px) {
      .hero-copy {
        grid-column: 3/11;
      }
    }

    @media (min-width:1024px) {
      .hero-copy {
        grid-column: 1/6;
      }
    }

    .hero-visual {
      grid-column: 1/-1;
      position: relative;
    }

    /* the stage carries the product, so it takes a column more than the copy
       and bleeds into the container padding to buy the width back */
    @media (min-width:1024px) {
      .hero-visual {
        grid-column: 7/13;
        margin-right: calc(var(--container-pad) * -1);
      }
    }

    @media (min-width:1280px) {
      .hero-visual {
        grid-column: 6/13;
      }
    }

    .hero h1 {
      text-align: center;
    }

    .hero-lede {
      margin-top: 1rem;
      text-align: center;
      color: var(--text-neutral);
    }

    @media (min-width:1024px) {
      .hero h1 {
        text-align: left;
      }

      .hero-lede {
        margin-top: 1.5rem;
        text-align: left;
      }
    }

    /* rotating underline words, as on Spoke */
    .rot {
      position: relative;
      display: inline-block;
      white-space: nowrap;
    }

    .rot>span {
      transition: color .2s;
      color: var(--text-neutral);
    }

    .rot[data-active="true"]>span {
      color: var(--text-strong);
    }

    .rot i {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      height: 1.5px;
      overflow: hidden;
      background: var(--gray-300);
      border-radius: 999px;
    }

    @media (min-width:1024px) {
      .rot i {
        bottom: 3px;
      }
    }

    .rot i b {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: var(--gray-900);
      transform: translateX(-100%);
    }

    .rot[data-active="true"] i b {
      animation: progress 5s linear forwards;
    }

    @keyframes progress {
      from {
        transform: translateX(-100%);
      }

      to {
        transform: translateX(0);
      }
    }

    .hero-form {
      margin-top: 2rem;
    }

    @media (min-width:1024px) {
      .hero-form {
        margin-top: 2.5rem;
        padding-right: 45px;
      }
    }

    .field-row {
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }

    @media (min-width:640px) {
      .field-row {
        flex-direction: row;
      }
    }

    .field {
      flex: 1;
      display: flex;
      align-items: center;
      height: 48px;
      background: var(--gray-0);
      border: 1px solid var(--border-dimmed);
      border-radius: 10px;
      transition: border-color .1s ease-in, box-shadow .1s ease-in;
    }

    .field:focus-within {
      border-color: var(--sp-indigo);
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--sp-indigo) 22%, transparent);
    }

    .field input {
      width: 100%;
      min-width: 0;
      height: 100%;
      padding-inline: 12px;
      border: 0;
      background: transparent;
      border-radius: 10px;
      outline: none;
      font-size: 17px;
      letter-spacing: .85px;
      font-weight: 400;
    }

    .field input::placeholder {
      color: var(--text-dimmed);
    }

    .hero-note {
      margin-top: .75rem;
      color: var(--text-neutral);
      text-align: center;
    }

    @media (min-width:1024px) {
      .hero-note {
        text-align: left;
      }
    }

    /* ------------------------------------------------------------
   Hero copy runs above the shared type scale: 1.2x for the body, form
   and note, 1.5x for the h1. The scale classes are used site-wide, so
   the sizes are re-stated here rather than changed at the source. The
   h1 is the exception to the flat multiplier: a fixed 90px pushes
   "Maximize" past a phone's edge, so it scales with the viewport and
   only reaches 1.5x once there is room for it.
   ------------------------------------------------------------ */
    .hero-copy h1 {
      font-size: clamp(60px, 18vw, 90px);
      line-height: 1.1;
      letter-spacing: 3px;
    }

    /* "one click" carries the promise, so it is the one bold phrase up there */
    .hero-copy h1 span {
      font-weight: 700;
    }

    .hero-copy .hero-lede {
      font-size: 22px;
      line-height: 32px;
      letter-spacing: 1px;
    }

    @media (min-width:1024px) {
      .hero-copy .hero-lede {
        font-size: 24px;
        line-height: 36px;
      }
    }

    .hero-copy .hero-note {
      font-size: 17px;
      line-height: 24px;
      letter-spacing: .6px;
    }

    .hero-copy .field {
      height: 58px;
    }

    .hero-copy .field input {
      font-size: 20px;
      letter-spacing: 1px;
    }

    .hero-copy .btn {
      height: 58px;
      padding-inline: 34px;
      font-size: 14px;
    }

    /* ============================================================
   PLACEHOLDER SCREENSHOT FRAMES
   ============================================================ */
    .frame {
      background: var(--gray-0);
      border-radius: 20px;
      padding: 4px;
      box-shadow: var(--shadow-lg);
    }

    @media (min-width:1024px) {
      .frame {
        border-radius: 24px;
        padding: 8px;
      }
    }

    .frame-inner {
      border: 1px solid var(--border-transparent);
      border-radius: 16px;
      overflow: hidden;
      background: var(--gray-50);
    }

    .ph {
      display: block;
      width: 100%;
      height: auto;
      background: var(--gray-100);
    }

    .ph text {
      font-family: var(--font-sans);
      font-weight: 550;
    }

    /* the hero screenshot frame runs on the dark palette, so it reads as
       part of the video ground rather than a white card punched into it */
    .frame-dark {
      background: var(--blue-dark1);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 25px -5px rgba(0, 0, 0, .55), 0 8px 10px -6px rgba(0, 0, 0, .4);
    }

    .frame-dark .frame-inner {
      border-color: var(--border-inv);
      background: var(--bg-inverted-brand-neutral);
    }

    /* ============================================================
   HERO MAP STAGE
   Lives inside .frame-inner, so it carries no border or radius of
   its own. Ported from the sales deck, on the dark palette EPAM uses
   for its inverted sections.
   ============================================================ */
    .stage {
      /* route and stop colours live here so the SVG stays theme-free */
      --stage-r0: var(--sp-cyan-bright);
      --stage-r1: var(--blue-300);
      --stage-r2: var(--sp-purple-light);
      background: var(--bg-inverted-brand-neutral);
    }

    .stage-head {
      display: flex;
      align-items: center;
      gap: .75rem;
      flex-wrap: wrap;
      padding: 1rem 1.25rem;
      background: rgba(255, 255, 255, .04);
      border-bottom: 1px solid var(--border-inv);
    }

    .stage-tag {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-inv-muted);
      font-variant-numeric: tabular-nums;
    }

    .stage-state {
      margin-left: auto;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--sp-cyan-bright);
      white-space: nowrap;
    }

    .map-holder {
      position: relative;
      background:
        linear-gradient(0deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0/100% 26px,
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0/26px 100%,
        radial-gradient(120% 110% at 15% 100%, color-mix(in oklab, var(--sp-cyan-bright) 16%, transparent), transparent 60%),
        var(--blue-dark2);
    }

    .map-holder svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .stage-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid var(--border-inv);
    }

    .stage-kpi {
      padding: 1.125rem 1.25rem 1.25rem;
      border-right: 1px solid var(--border-inv);
    }

    .stage-kpi:last-child {
      border-right: 0;
    }

    .stage-num {
      font-size: clamp(1.7rem, 2.7vw, 2.25rem);
      line-height: 1.15;
      font-weight: 700;
      letter-spacing: .01em;
      font-variant-numeric: tabular-nums;
      color: var(--text-inv-strong);
      width: fit-content;
    }

    /* the optimized state paints the numbers with the dark-ground gradient,
       the same one EPAM uses on its inverted sections */
    .stage-kpi.win .stage-num {
      background-image: var(--epam-gradient-dark);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .stage-lab {
      margin: .375rem 0 0;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.35;
      color: var(--text-inv-muted);
    }

    .stage-foot {
      display: flex;
      align-items: center;
      gap: .75rem;
      flex-wrap: wrap;
      padding: 1.25rem;
      border-top: 1px solid var(--border-inv);
    }

    .stage-hint {
      font-size: 15px;
      font-weight: 400;
      line-height: 1.35;
      color: var(--text-inv-muted);
    }

    /* the hint only speaks once the plan has been built */
    .stage-hint:empty {
      display: none;
    }

    .stage .btn {
      height: 46px;
      padding-inline: 26px;
      font-size: 14px;
    }

    /* .hero already inverts .btn-primary, so the button needs no override,
       only a resting state once it has been used */
    .stage .btn[disabled] {
      cursor: default;
      opacity: .55;
    }

    .hero .stage .btn-primary[disabled]:hover {
      --btn-fill: var(--blue-dark2);
      color: var(--gray-0);
    }

    .route {
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .route[data-depot="0"] {
      stroke: var(--stage-r0);
    }

    .route[data-depot="1"] {
      stroke: var(--stage-r1);
    }

    .route[data-depot="2"] {
      stroke: var(--stage-r2);
    }

    .depot {
      stroke: none;
    }

    .depot[data-depot="0"] {
      fill: var(--stage-r0);
    }

    .depot[data-depot="1"] {
      fill: var(--stage-r1);
    }

    .depot[data-depot="2"] {
      fill: var(--stage-r2);
    }

    .stop {
      fill: var(--blue-dark2);
      stroke: var(--gray-500);
      transition: opacity .5s, fill .5s, stroke .5s;
    }

    .stop.on {
      fill: color-mix(in oklab, var(--sp-cyan-bright) 22%, transparent);
      stroke: var(--sp-cyan-bright);
    }

    .skipped {
      opacity: .22;
    }

    /* ============================================================
   ROLE FLOW STRIP
   ============================================================ */
    .flow {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .75rem;
      margin-top: 2.5rem;
    }

    @media (min-width:900px) {
      .flow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
      }
    }

    .flow-card:nth-child(1) {
      --acc: var(--sp-cyan);
    }

    .flow-card:nth-child(2) {
      --acc: var(--sp-blue);
    }

    .flow-card:nth-child(3) {
      --acc: var(--sp-violet);
    }

    .flow-card:nth-child(4) {
      --acc: var(--sp-blue);
    }

    .flow-card {
      background: var(--gray-0);
      border-radius: 16px;
      box-shadow: var(--shadow-base);
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: .625rem;
      position: relative;
    }

    /* the icon and the role name read as one line, not as two stacked marks */
    .flow-head {
      display: flex;
      align-items: center;
      gap: .625rem;
    }

    .flow-card h3 {
      font-size: 18px;
      line-height: 24px;
      letter-spacing: .85px;
      font-weight: 700;
    }

    .flow-icon {
      width: 22px;
      height: 22px;
      flex: none;
      color: var(--acc, var(--sp-blue));
    }

    .flow-desc {
      margin-top: .125rem;
    }

    .flow-step {
      display: flex;
      align-items: center;
      gap: .5rem;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: .5px;
      font-weight: 400;
      color: var(--text-neutral);
    }

    .flow-step::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 999px;
      flex: none;
      background: var(--acc, var(--sp-blue));
    }

    .flow-arrow {
      position: absolute;
      right: -14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gray-300);
      display: none;
      z-index: 2;
    }

    @media (min-width:900px) {
      .flow-arrow {
        display: block;
      }
    }

    .route-view {
      margin-top: 2.5rem;
      border: 1px solid var(--border-dimmed);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: var(--shadow-base);
    }

    /* when the shot is the last thing in a section, the section's own
       padding-bottom carries the space; otherwise it owns the gap */
    .route-view:not(:last-child) {
      margin-bottom: 3.5rem;
    }

    @media (min-width:1024px) {
      .route-view {
        margin-top: 3rem;
        border-radius: 24px;
      }

      .route-view:not(:last-child) {
        margin-bottom: 5rem;
      }
    }

    .route-view img {
      display: block;
      width: 100%;
      height: auto;
    }

    .role {
      grid-column: 1/-1;
    }

    @media (min-width:640px) {
      .role {
        grid-column: span 6;
        padding-right: 1.5rem;
      }
    }

    @media (min-width:1024px) {
      .role {
        grid-column: span 3;
      }
    }

    .role-head {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-bottom: .375rem;
    }

    .role-head svg {
      width: 22px;
      height: 22px;
      flex: none;
      color: var(--acc-ink, var(--ink-blue));
    }

    /* ============================================================
   FEATURE CARDS
   ============================================================ */
    .cards {
      row-gap: 1.5rem;
      margin-top: 2.5rem;
    }

    .cards .card:nth-child(1) {
      --acc: var(--sp-cyan);
      --acc-ink: var(--ink-cyan);
    }

    .cards .card:nth-child(2) {
      --acc: var(--sp-blue);
      --acc-ink: var(--ink-blue);
    }

    .cards .card:nth-child(3) {
      --acc: var(--sp-violet);
      --acc-ink: var(--ink-violet);
    }

    .cards .card:nth-child(4) {
      --acc: var(--sp-cyan);
      --acc-ink: var(--ink-cyan);
    }

    .cards .card:nth-child(5) {
      --acc: var(--sp-blue);
      --acc-ink: var(--ink-blue);
    }

    .card {
      grid-column: 1/-1;
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      box-shadow: var(--shadow-base);
      background-image: linear-gradient(to bottom right, var(--gray-0) 28%, color-mix(in oklab, var(--acc, var(--sp-blue)) 26%, var(--gray-0)));
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    @media (min-width:640px) {
      .card {
        grid-column: span 6;
      }
    }

    @media (min-width:1024px) {
      .card {
        grid-column: span 4;
        padding: 2.5rem;
        gap: 2.5rem;
      }

      .card-wide {
        grid-column: span 8;
      }
    }

    .card-label {
      font-size: 18px;
      line-height: 24px;
      letter-spacing: .85px;
      font-weight: 700;
      color: var(--acc-ink, var(--ink-blue));
    }

    .card-title {
      max-width: 34ch;
    }

    .card-shot {
      margin: auto -1.5rem -1.5rem 0;
      background: var(--gray-0);
      border-top-left-radius: 20px;
      border-bottom-right-radius: 24px;
      padding: 4px 0 0 4px;
      box-shadow: var(--shadow-lg);
    }

    @media (min-width:1024px) {
      .card-shot {
        margin: auto -2.5rem -2.5rem 0;
        border-top-left-radius: 24px;
        padding: 8px 0 0 8px;
      }
    }

    .card-shot>div {
      border-top: 1px solid var(--border-transparent);
      border-left: 1px solid var(--border-transparent);
      border-top-left-radius: 16px;
      border-bottom-right-radius: 16px;
      overflow: hidden;
    }

    /* ============================================================
   WIDGET SHELL (interactives)
   ============================================================ */
    .widget {
      margin-top: 2.5rem;
      border-radius: 24px;
      box-shadow: var(--shadow-base);
      background: var(--gray-0);
      overflow: hidden;
    }

    .widget-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      padding: 1rem 1.5rem;
      border-bottom: 1px solid var(--border-dimmed);
      background: var(--bg-gray-1);
    }

    .widget-body {
      padding: 1.5rem;
    }

    @media (min-width:1024px) {
      .widget-body {
        padding: 2.5rem;
      }
    }

    .widget-split {
      display: grid;
      gap: 2rem;
    }

    @media (min-width:900px) {
      .widget-split {
        grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
        gap: 2.5rem;
      }
    }

    /* range slider */
    .slider {
      width: 100%;
      appearance: none;
      height: 4px;
      border-radius: 999px;
      background: var(--gray-200);
      outline: none;
      margin-block: 1rem;
    }

    .slider::-webkit-slider-thumb {
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      cursor: pointer;
      background: var(--gray-0);
      box-shadow: 0 0 0 1px var(--gray-300), var(--shadow-base);
      border: 5px solid var(--acc, var(--sp-blue));
      box-sizing: border-box;
    }

    .slider::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      cursor: pointer;
      background: var(--gray-0);
      border: 5px solid var(--acc, var(--sp-blue));
      box-sizing: border-box;
    }

    .slider-ends {
      display: flex;
      justify-content: space-between;
      color: var(--text-dimmed);
    }

    .kpis {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    .kpi {
      border: 1px solid var(--border-dimmed);
      border-radius: 16px;
      padding: 1rem 1.125rem;
      background: var(--bg-gray-1);
    }

    .kpi-num {
      font-size: 46.5px;
      line-height: 54px;
      letter-spacing: .02em;
      font-weight: 300;
      font-variant-numeric: tabular-nums;
      width: fit-content;
      background-image: var(--epam-gradient-inline);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    @media (min-width:1024px) {
      .kpi-num {
        font-size: 66px;
        line-height: 75px;
        letter-spacing: .02em;
      }
    }

    .kpi-label {
      margin-top: .25rem;
      color: var(--text-neutral);
    }

    .slots {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: .5rem;
      margin-top: 1.25rem;
    }

    @media (min-width:640px) {
      .slots {
        grid-template-columns: repeat(10, minmax(0, 1fr));
      }
    }

    .slot {
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      background: color-mix(in oklab, var(--acc, var(--sp-blue)) 14%, transparent);
      color: var(--acc-ink, var(--ink-blue));
      border: 1px solid color-mix(in oklab, var(--acc, var(--sp-blue)) 24%, transparent);
    }

    .slot.risk {
      background: color-mix(in oklab, var(--orange-500) 12%, transparent);
      color: #b04708;
      border-color: color-mix(in oklab, var(--orange-500) 26%, transparent);
    }

    .slot.cut {
      background: var(--gray-50);
      color: var(--gray-300);
      border-color: var(--border-dimmed);
    }

    .week {
      display: flex;
      gap: .5rem;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 1.25rem;
    }

    .day {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      background: color-mix(in oklab, var(--green-300) 16%, transparent);
      color: var(--green-500);
    }

    .day.bad {
      background: color-mix(in oklab, var(--red-500) 12%, transparent);
      color: #a8200e;
    }

    .week .cap {
      color: var(--text-neutral);
      font-size: 14px;
      letter-spacing: .25px;
    }

    /* segmented control */
    .seg {
      display: inline-flex;
      padding: 3px;
      border-radius: 12px;
      background: var(--bg-gray-3);
      gap: 3px;
    }

    .seg button {
      border: 0;
      background: transparent;
      border-radius: 9px;
      cursor: pointer;
      padding: .5rem .875rem;
      font-size: 14px;
      font-weight: 550;
      letter-spacing: .2px;
      color: var(--text-neutral);
      transition: background .12s, color .12s;
    }

    .seg button[aria-pressed="true"] {
      background: var(--gray-0);
      color: var(--text-strong);
      box-shadow: var(--shadow-base);
    }

    .tbl th {
      text-align: left;
      padding: .625rem .75rem;
      border-bottom: 1px solid var(--border-neutral);
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .15em;
      font-weight: 900;
      color: var(--text-muted);
    }

    .tbl td {
      padding: .875rem .75rem;
      border-bottom: 1px solid var(--border-dimmed);
      vertical-align: middle;
    }

    .tbl .name {
      font-weight: 550;
    }

    .tbl .name span {
      display: block;
      font-size: 14px;
      font-weight: 400;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .bar-cell {
      display: flex;
      align-items: center;
      gap: .625rem;
    }

    .bar-fill {
      height: 10px;
      border-radius: 999px;
      background: var(--epam-gradient-inline);
      background-size: 220px 100%;
      transition: width .3s var(--ease-out-quart), background .2s;
    }

    .bar-fill.warn {
      background: linear-gradient(90deg, var(--sp-orange), var(--sp-red));
      background-size: auto;
    }

    .verdict {
      margin-top: 1.25rem;
      padding: 1rem 1.125rem;
      border-radius: 16px;
      background: color-mix(in oklab, var(--red-500) 7%, transparent);
      border: 1px solid color-mix(in oklab, var(--red-500) 18%, transparent);
      color: var(--text-neutral);
    }

    .verdict.ok {
      background: color-mix(in oklab, var(--green-300) 9%, transparent);
      border-color: color-mix(in oklab, var(--green-300) 22%, transparent);
    }

    .verdict b {
      color: var(--text-strong);
      font-weight: 600;
    }

    /* ============================================================
   INVERTED (dark) SECTIONS
   ============================================================ */
    .inverted {
      background: var(--bg-inverted-brand-neutral);
      color: var(--text-inv-neutral);
    }

    .inverted.mesh {
      background-color: var(--blue-dark2);
      background-image:
        radial-gradient(52% 70% at 88% 6%, color-mix(in oklab, var(--sp-cyan-bright) 20%, transparent), transparent 70%),
        radial-gradient(48% 64% at 6% 96%, color-mix(in oklab, var(--sp-purple-light) 22%, transparent), transparent 70%),
        radial-gradient(60% 80% at 46% 40%, color-mix(in oklab, var(--sp-blue) 24%, transparent), transparent 74%);
    }

    .inverted h2,
    .inverted h3,
    .inverted .strong {
      color: var(--text-inv-strong);
    }

    .radial {
      background-color: var(--blue-dark2);
      background-image:
        radial-gradient(46% 120% at 10% 0, color-mix(in oklab, var(--sp-cyan-bright) 22%, transparent), transparent 72%),
        radial-gradient(50% 130% at 90% 8%, color-mix(in oklab, var(--sp-purple-light) 24%, transparent), transparent 72%),
        radial-gradient(56% 120% at 50% 100%, color-mix(in oklab, var(--sp-blue) 26%, transparent), transparent 74%);
    }

    /* code card */
    .code-card {
      border-radius: 24px;
      overflow: hidden;
      background: var(--blue-900);
      box-shadow: var(--shadow-xl);
      border: 1px solid var(--border-inv);
    }

    .code-head {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .75rem 1.25rem;
      border-bottom: 1px solid var(--border-inv);
      color: var(--text-inv-muted);
      font-size: 14px;
      letter-spacing: .5px;
    }

    .code-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: color-mix(in oklab, var(--blue-100) 25%, transparent);
    }

    .code-card pre {
      margin: 0;
      padding: 1.25rem;
      overflow-x: auto;
      font-family: inherit;
      font-variant-numeric: tabular-nums;
      font-size: 14px;
      line-height: 22px;
      color: var(--blue-100);
    }

    @media (min-width:1024px) {
      .code-card pre {
        font-size: 14.5px;
        padding: 1.5rem;
      }
    }

    .code-card .c {
      color: color-mix(in oklab, var(--blue-100) 45%, transparent);
    }

    .code-card .k {
      color: var(--teal-200);
    }

    .code-card .s {
      color: var(--green-100);
    }

    .chips {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      padding: 0 1.25rem 1.25rem;
    }

    .chip {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .625rem .875rem;
      border-radius: 12px;
      background: color-mix(in oklab, var(--blue-100) 8%, transparent);
      border: 1px solid var(--border-inv);
      font-variant-numeric: tabular-nums;
      font-size: 14px;
      color: var(--blue-100);
    }

    .chip .ok {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--green-300);
      flex: none;
    }

    /* ============================================================
   PRICING
   ============================================================ */
    .plans {
      row-gap: 1.5rem;
      margin-top: 3rem;
    }

    .plan {
      grid-column: 1/-1;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--border-neutral);
      border-radius: 24px;
      padding: 1.75rem;
      background: var(--gray-0);
      box-shadow: var(--shadow-base);
    }

    @media (min-width:768px) {
      .plan {
        grid-column: span 4;
      }
    }

    @media (min-width:1024px) {
      .plan {
        padding: 2.25rem;
      }
    }

    .plan-featured {
      border-color: transparent;
      box-shadow: 0 0 0 2px var(--sp-blue), var(--shadow-lg);
    }

    .plan .plan-price .amt {
      background-image: var(--epam-gradient-inline);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .plan-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
    }

    .plan-price {
      display: flex;
      align-items: baseline;
      gap: .375rem;
      margin-top: 1rem;
    }

    .plan-price .amt {
      font-size: 44px;
      line-height: 50px;
      letter-spacing: .02em;
      font-weight: 700;
    }

    .plan-price .per {
      color: var(--text-muted);
    }

    .plan-desc {
      margin-top: .875rem;
      color: var(--text-neutral);
    }

    .plan ul {
      margin-top: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: .75rem;
      flex: 1;
    }

    .plan li {
      display: flex;
      gap: .625rem;
      align-items: flex-start;
      font-size: 17px;
      line-height: 26px;
      letter-spacing: .85px;
      font-weight: 400;
    }

    .plan li svg {
      width: 20px;
      height: 20px;
      flex: none;
      color: var(--acc, var(--sp-blue));
      margin-top: 1px;
    }

    .plan .btn {
      margin-top: 2rem;
      width: 100%;
    }

    .billing {
      row-gap: 2rem;
      margin-top: 3rem;
      padding-top: 3rem;
      border-top: 1px solid var(--border-dimmed);
    }

    .billing>div {
      grid-column: 1/-1;
    }

    @media (min-width:640px) {
      .billing>div {
        grid-column: span 4;
      }
    }

    /* everything-it-does columns */
    .feature-col {
      grid-column: 1/-1;
    }

    @media (min-width:1024px) {
      .feature-col {
        grid-column: span 4;
      }
    }

    /* Material Symbols bullet. The stylesheet is requested with icon_names=verified_user,
   so that glyph is the only one delivered: any other name renders as its literal text. */
    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: 400;
      font-style: normal;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      white-space: nowrap;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    .feature-col li {
      display: flex;
      gap: .625rem;
      align-items: flex-start;
    }

    .feature-col li .material-symbols-outlined {
      font-size: 20px;
      flex: none;
      margin-top: 3px;
      color: var(--sp-cyan-bright);
    }

    /* ROI */
    .roi-inputs {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }

    .roi-field label {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
    }

    .roi-field .val {
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      font-size: 18px;
    }

    .roi-big {
      font-size: 96px;
      line-height: 104px;
      letter-spacing: 0;
      font-weight: 300;
      font-variant-numeric: tabular-nums;
      width: fit-content;
      background-image: var(--epam-gradient-inline);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    @media (min-width:1024px) {
      .roi-big {
        font-size: 144px;
        line-height: 156px;
      }
    }

    .roi-big small {
      font-size: .42em;
      font-weight: 700;
      letter-spacing: 0;
      margin-left: .1em;
    }

    .roi-tiers {
      display: grid;
      gap: 1rem;
      margin-top: 1.5rem;
    }

    @media (min-width:768px) {
      .roi-tiers {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    /* Each tier is a label wrapping a visually hidden radio, so the browser
       gives us keyboard arrow-key selection and radiogroup semantics for free.
       Selection reads as border colour; the inner 2px ring keeps the card from
       shifting by a pixel when the border thickens. */
    .roi-tier {
      border: 1px solid var(--border-dimmed);
      border-radius: 16px;
      padding: 1.125rem;
      background: var(--gray-0);
      cursor: pointer;
      transition: border-color .12s ease-out, box-shadow .12s ease-out;
    }

    .roi-tier:hover {
      border-color: var(--border-strong);
    }

    .roi-tier.is-active {
      border-color: var(--acc, var(--sp-blue));
      box-shadow: inset 0 0 0 1px var(--acc, var(--sp-blue));
    }

    .roi-tier:focus-within {
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--acc, var(--sp-blue)) 30%, transparent);
    }

    .roi-tier.is-active:focus-within {
      box-shadow: inset 0 0 0 1px var(--acc, var(--sp-blue)),
        0 0 0 3px color-mix(in oklab, var(--acc, var(--sp-blue)) 30%, transparent);
    }

    .roi-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: .75rem;
      padding-block: .375rem;
    }

    .roi-row+.roi-row {
      border-top: 1px solid var(--border-dimmed);
    }

    .roi-row .v {
      font-variant-numeric: tabular-nums;
      font-weight: 700;
    }

    #c200 {
      font-size: 18px;
    }

    /* The ROI widget carries seven controls, so its input column runs wider than
       the certainty widget's. .widget-split itself is shared, so only modify here. */
    @media (min-width:900px) {
      .widget-split.roi-split {
        grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
      }
    }

    .roi-inputs.roi-inputs {
      gap: 1.25rem;
    }

    /* the input column reads as plain text, not as a set of bold headings */
    .roi-inputs label,
    .roi-inputs .val,
    .roi-inputs select,
    .roi-inputs p {
      font-weight: 400;
    }

    .roi-firm .kpi-num {
      font-size: 37.5px;
      line-height: 48px;
    }

    @media (min-width:1024px) {
      .roi-firm .kpi-num {
        font-size: 46.5px;
        line-height: 57px;
      }
    }

    .roi-tiers {
      margin-top: 0;
      margin-bottom: 2.5rem;
    }

    /* .b-small-strong doubled (14 -> 28), .b-base at 1.5x (17 -> 25.5) */
    .roi-kicker {
      font-size: 24px;
      line-height: 40px;
      letter-spacing: .5px;
      font-weight: 400;
      color: var(--text-strong);
    }

    /* .b-base-strong doubled (17 -> 34) */
    .roi-pick {
      font-size: 34px;
      line-height: 46px;
      letter-spacing: .85px;
      font-weight: 300;
      text-align: center;
      color: var(--text-strong);
    }

    .roi-outro {
      font-size: 36px;
      line-height: 46px;
      letter-spacing: .85px;
      font-weight: 300;
      color: var(--text-strong);
    }

    .roi-lede {
      font-size: 18px;
      line-height: 27px;
      letter-spacing: .85px;
      font-weight: 400;
      color: var(--text-strong);
    }

    .roi-note {
      margin-top: 2rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--border-dimmed);
    }

    .roi-note p+p {
      margin-top: .75rem;
    }

    /* select: the file had none, so this mirrors .field */
    .select {
      position: relative;
      display: block;
      margin-top: 1rem;
    }

    .select select {
      width: 100%;
      height: 48px;
      padding: 0 40px 0 12px;
      background: var(--gray-0);
      border: 1px solid var(--border-dimmed);
      border-radius: 10px;
      font-size: 17px;
      letter-spacing: .85px;
      font-weight: 400;
      appearance: none;
      outline: none;
      cursor: pointer;
      transition: border-color .1s ease-in, box-shadow .1s ease-in;
    }

    .select::after {
      content: "";
      position: absolute;
      right: 16px;
      top: 50%;
      width: 9px;
      height: 9px;
      margin-top: -6px;
      border-right: 2px solid var(--text-dimmed);
      border-bottom: 2px solid var(--text-dimmed);
      transform: rotate(45deg);
      pointer-events: none;
    }

    .select select:hover {
      border-color: var(--border-strong);
    }

    /* the global :focus-visible ring forces 8px, so restate the radius */
    .select select:focus-visible {
      border-color: var(--sp-indigo);
      border-radius: 10px;
      box-shadow: 0 0 0 3px color-mix(in oklab, var(--sp-indigo) 22%, transparent);
    }

    /* ============================================================
   FAQ
   ============================================================ */
    .faq {
      margin-top: 2.5rem;
      border-top: 1px solid var(--border-neutral);
    }

    .faq details {
      border-bottom: 1px solid var(--border-dimmed);
    }

    .faq summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.5rem;
      padding-block: 1.5rem;
      font-weight: 600;
      color: #000;
    }

    .faq summary::-webkit-details-marker {
      display: none;
    }

    .faq summary .chev {
      flex: none;
      color: var(--text-dimmed);
      transition: transform .2s var(--ease-out-quart);
      margin-top: 2px;
    }

    .faq details[open] summary .chev {
      transform: rotate(180deg);
    }

    .faq .answer {
      padding-bottom: 1.75rem;
      color: #000;
      max-width: 72ch;
      display: flex;
      flex-direction: column;
      gap: .75rem;
    }

    .faq .answer a {
      color: var(--ink-blue);
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* ============================================================
   FOOTER
   ============================================================ */
    .footer {
      border-top: 1px solid var(--border-neutral);
      padding-block: 4rem;
      background: var(--bg-gray-1);
    }

    .footer-grid {
      row-gap: 2.5rem;
    }

    .footer-brand {
      grid-column: 1/-1;
    }

    @media (min-width:1024px) {
      .footer-brand {
        grid-column: span 4;
      }
    }

    .footer-col {
      grid-column: span 2;
    }

    @media (min-width:640px) {
      .footer-col {
        grid-column: span 3;
      }
    }

    @media (min-width:1024px) {
      .footer-col {
        grid-column: span 2;
      }
    }

    .footer-col h4 {
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .15em;
      font-weight: 900;
      color: var(--text-muted);
      margin-bottom: 1rem;
    }

    .footer-col li+li {
      margin-top: .75rem;
    }

    .footer-col a {
      font-size: 17px;
      line-height: 26px;
      letter-spacing: .85px;
      font-weight: 400;
      color: var(--text-neutral);
    }

    .footer-col a:hover {
      color: var(--text-strong);
    }

    .footer-bottom {
      margin-top: 3rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border-dimmed);
      display: flex;
      flex-wrap: wrap;
      gap: .75rem 1.5rem;
      justify-content: space-between;
      color: var(--text-dimmed);
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }

      html {
        scroll-behavior: auto;
      }
    }