@layer reset, tokens, base, layout, components, utilities, motion;
@layer tokens {
  :root {
    --blue: #1E5BFF;
    --blue-electric: #2F80FF;
    --violet: #7A5CFF;
    --navy: #0A1330;
    --ink: #0B1020;
    --soft: #F5F8FF;
    --white: #FFFFFF;
    --muted: #5B6785;
    --line: #E3E9F6;
    --bg: var(--white);
    --surface: var(--white);
    --surface-2: var(--soft);
    --text: var(--ink);
    --text-soft: #2A3552;
    --line-strong: #D2DCF2;
    --grad: linear-gradient(135deg, var(--blue) 0%, var(--blue-electric) 46%, var(--violet) 100%);
    --grad-soft: linear-gradient(135deg, rgb(30 91 255 / .10), rgb(122 92 255 / .10));
    --grad-line: linear-gradient(90deg, rgb(30 91 255 / .55), rgb(122 92 255 / .55));
    --grad-text: linear-gradient(120deg, var(--blue) 0%, var(--blue-electric) 40%, var(--violet) 100%);
    --glass: linear-gradient(135deg, rgb(255 255 255 / .58) 0%, rgb(238 244 255 / .34) 50%, rgb(228 236 255 / .26) 100%);
    --glass-scrolled: linear-gradient(135deg, rgb(255 255 255 / .90) 0%, rgb(245 249 255 / .80) 55%, rgb(240 246 255 / .78) 100%);
    --glass-edge: linear-gradient(120deg, rgb(255 255 255 / .95) 0%, rgb(122 92 255 / .28) 34%, rgb(30 91 255 / .32) 68%, rgb(255 255 255 / .75) 100%);
    --sh-xs: 0 1px 2px rgb(11 16 32 / .05);
    --sh-sm: 0 2px 6px rgb(11 16 32 / .05), 0 8px 24px -18px rgb(11 16 32 / .35);
    --sh-md: 0 10px 22px -14px rgb(11 16 32 / .28), 0 2px 6px rgb(11 16 32 / .04);
    --sh-lg: 0 28px 60px -32px rgb(15 46 107 / .35), 0 6px 18px -12px rgb(11 16 32 / .18);
    --glow: 0 18px 40px -18px rgb(30 91 255 / .5);
    --r-sm: 12px;
    --r: 18px;
    --r-card: 24px;
    --r-lg: 32px;
    --pill: 999px;
    --shell: 1240px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --header-h: 82px;
    --font-head: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-display: clamp(2.15rem, 1.2rem + 3.9vw, 4.1rem);
    --fs-h1: clamp(1.95rem, 1.3rem + 2.6vw, 3.15rem);
    --fs-h2: clamp(1.6rem, 1.15rem + 1.9vw, 2.55rem);
    --fs-h3: clamp(1.05rem, .98rem + .35vw, 1.25rem);
    --fs-lead: clamp(1.02rem, .97rem + .35vw, 1.18rem);
    --fs-body: clamp(.97rem, .94rem + .16vw, 1.04rem);
    --fs-sm: .875rem;
    --fs-xs: .79rem;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur: 260ms;
    --hero-a: rgb(47 128 255 / .34);
    --hero-b: rgb(122 92 255 / .30);
    color-scheme: light;
  }

  [data-page="product"] {
    --hero-a: rgb(30 91 255 / .30); --hero-b: rgb(122 92 255 / .22);
  }

  [data-page="trust"] {
    --hero-a: rgb(30 91 255 / .22); --hero-b: rgb(122 92 255 / .18);
  }
}

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

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

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

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

  img, svg, video {
    display: block; max-inline-size: 100%;
  }

  img {
    block-size: auto;
  }

  picture {
    display: contents;
  }

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

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

  button {
    cursor: pointer; background: none; border: 0;
  }

  [hidden] {
    display: none !important;
  }

  table {
    border-collapse: collapse; inline-size: 100%;
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
  }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    min-block-size: 100svb;
  }

  body:has(dialog[open]) {
    overflow: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--fs-h1);
  }

  h2 {
    font-size: var(--fs-h2); letter-spacing: -.028em;
  }

  h3 {
    font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.3;
  }

  p {
    text-wrap: pretty;
  }

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

  em {
    font-style: italic;
  }

  a:hover {
    color: var(--blue);
  }

  ::selection {
    background: rgb(30 91 255 / .16); color: var(--ink);
  }

  .skip-link {
    position: fixed;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    z-index: 300;
    padding: .7rem 1.1rem;
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--ink);
    box-shadow: var(--sh-md);
    transform: translateY(-160%);
    transition: transform var(--dur) var(--ease);
  }

  .skip-link:focus-visible {
    transform: none;
  }
}

@layer layout {
  .shell {
    inline-size: 100%;
    max-inline-size: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section {
    padding-block: clamp(3.25rem, 7vw, 6.5rem);
  }

  .section--tight {
    padding-block: clamp(2.25rem, 5vw, 4rem);
  }

  .section--soft {
    background: var(--surface-2);
  }

  .section--ink {
    background:
    radial-gradient(900px 420px at 12% -10%, rgb(47 128 255 / .20), transparent 60%),
    radial-gradient(800px 400px at 92% 110%, rgb(122 92 255 / .18), transparent 62%),
    #070C1C;
    color: #E9EFFC;
  }

  .section--ink :where(h2, h3, strong) {
    color: #FFFFFF;
  }

  .section--ink :where(p, li) {
    color: #B9C7E6;
  }

  .stack {
    display: grid; gap: var(--stack-gap, 1rem);
  }

  .cluster {
    display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem;
  }

  .split {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
  }

  @media (width >= 60rem) {
    .split {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    }

    .split.split--wide-start {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    }
  }
}

@layer components {
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    padding-block: 10px;
    transition: padding-block var(--dur) var(--ease);
  }

  .site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.75rem);
    inline-size: calc(100% - (var(--gutter) * 2));
    max-inline-size: var(--shell);
    min-block-size: 62px;
    margin-inline: auto;
    padding-inline: 1.05rem;
    border: 1px solid rgb(255 255 255 / .55);
    border-radius: 22px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(200%);
    backdrop-filter: blur(22px) saturate(200%);
    box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .9),
    inset 0 -1px 0 rgb(11 16 32 / .04),
    0 14px 38px -22px rgb(11 16 32 / .34),
    0 2px 6px rgb(11 16 32 / .04);
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    flex: none;
    border-radius: 12px;
  }

  .nav {
    margin-inline-start: auto;
  }

  .nav__item {
    position: relative;
  }

  .nav__more {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .5em .7em;
    border-radius: var(--pill);
    font-size: .93rem;
    font-weight: 500;
    color: var(--text-soft);
  }

  .nav__menu {
    position: absolute;
    inset-block-start: calc(100% + .55rem);
    inset-inline-end: 0;
    display: none;
    gap: .15rem;
    min-inline-size: 11rem;
    padding: .45rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    box-shadow: var(--sh-md);
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-inline-start: .25rem;
  }

  .menu-toggle {
    display: none;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid rgb(30 91 255 / .16);
    border-radius: 14px;
    background: rgb(255 255 255 / .55);
    color: var(--text);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .mobile-menu {
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100%;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
  }

  .site-header.is-scrolled {
    padding-block: 7px;
  }

  @media (width <= 640px) {
    .site-header {
      padding-block: 8px;
    }

    .site-header.is-scrolled {
      padding-block: 6px;
    }
  }

  .site-header__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--glass-edge);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  .is-scrolled .site-header__inner {
    background: var(--glass-scrolled);
    box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    inset 0 -1px 0 rgb(11 16 32 / .05),
    0 18px 44px -24px rgb(11 16 32 / .42),
    0 2px 8px rgb(11 16 32 / .06);
  }

  @media (width <= 640px) {
    .site-header__inner {
      min-block-size: 56px;
      padding-inline: .75rem .6rem;
      border-radius: 18px;
    }
  }

  .brand__mark {
    inline-size: 38px;
    filter: drop-shadow(0 6px 12px rgb(30 91 255 / .22));
  }

  .brand__word {
    font-family: var(--font-head);
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
  }

  .brand__ne {
    color: var(--blue);
  }

  .brand__meets {
    color: var(--navy);
  }

  @media (width <= 640px) {
    .brand__mark {
      inline-size: 32px;
    }
  }

  @media (width <= 640px) {
    .brand__word {
      font-size: 1.18rem;
    }
  }

  .nav__list {
    display: flex; align-items: center; gap: .15rem;
  }

  .nav__link {
    position: relative;
    display: inline-block;
    padding: .5em .7em;
    border-radius: var(--pill);
    font-size: .93rem;
    font-weight: 500;
    color: var(--text-soft);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  @media (width <= 63.9rem) {
    .nav {
      display: none;
    }
  }

  .nav__link:hover {
    color: var(--text); background: rgb(30 91 255 / .09);
  }

  .nav__link[aria-current="page"] {
    color: var(--blue);
    font-weight: 600;
  }

  .nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: 50%;
    inset-block-end: .15rem;
    inline-size: 16px;
    block-size: 2px;
    margin-inline-start: -8px;
    border-radius: 2px;
    background: var(--grad);
  }

  .nav__item:hover > .nav__menu, .nav__item:focus-within > .nav__menu, .nav__item.is-open > .nav__menu {
    display: grid;
  }

  .nav__more:hover {
    color: var(--text); background: rgb(30 91 255 / .09);
  }

  .nav__more .icon {
    inline-size: 14px; block-size: 14px; transition: transform var(--dur) var(--ease);
  }

  .nav__item:hover .nav__more .icon {
    transform: rotate(180deg);
  }

  .nav__menu a {
    padding: .55rem .7rem;
    border-radius: 9px;
    font-size: .9rem;
    color: var(--text-soft);
  }

  .nav__menu a:hover {
    background: var(--surface-2); color: var(--text);
  }

  @media (width <= 63.9rem) {
    .header-actions {
      margin-inline-start: auto;
    }
  }

  @media (width <= 63.9rem) {
    .header-actions .btn {
      display: none;
    }
  }

  .menu-toggle:hover {
    background: rgb(30 91 255 / .09); border-color: rgb(30 91 255 / .3);
  }

  @media (width <= 63.9rem) {
    .menu-toggle {
      display: grid;
    }
  }

  @media (width <= 640px) {
    .menu-toggle {
      inline-size: 40px; block-size: 40px; border-radius: 12px;
    }
  }

  .mobile-menu::backdrop {
    background: rgb(10 19 48 / .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }

  .mobile-menu[open] {
    display: grid; align-content: end;
  }

  .mobile-menu__panel {
    position: relative;
    padding: 1.35rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: var(--surface);
    box-shadow: 0 -20px 50px -30px rgb(11 16 32 / .5);
    animation: sheet-up 280ms var(--ease-out) both;
  }

  .mobile-menu__list {
    display: grid;
    gap: .1rem;
    margin-block-end: .9rem;
  }

  .mobile-menu__note {
    margin-block-start: .9rem;
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: center;
  }

  .mobile-menu__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 48px;
    padding: .55rem .15rem;
    border-block-end: 1px solid var(--line);
    font-family: var(--font-head);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .mobile-menu__list a[aria-current="page"] {
    color: var(--blue);
  }

  .mobile-menu__list a::after {
    content: "→";
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--muted);
  }

  @keyframes sheet-up {
    from {
      transform: translateY(18px); opacity: 0;
    }
    to {
      transform: none; opacity: 1;
    }
  }
}

@layer components {
  .icon {
    inline-size: 22px;
    block-size: 22px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-block-size: 48px;
    padding: .78em 1.35em;
    border: 1px solid transparent;
    border-radius: var(--pill);
    font-family: var(--font-head);
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-align: left;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .42em .85em;
    border: 1px solid rgb(30 91 255 / .18);
    border-radius: var(--pill);
    background: rgb(30 91 255 / .06);
    color: #1948C8;
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .lead {
    font-size: var(--fs-lead);
    color: var(--muted);
    line-height: 1.62;
  }

  .icon-chip {
    display: grid;
    place-items: center;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 14px;
    border: 1px solid rgb(30 91 255 / .16);
    background: var(--grad-soft);
    color: var(--blue);
  }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--blue);
  }

  .icon--sm {
    inline-size: 18px; block-size: 18px;
  }

  .icon--lg {
    inline-size: 26px; block-size: 26px;
  }

  .btn .icon {
    inline-size: 18px; block-size: 18px; transition: transform var(--dur) var(--ease);
  }

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

  .btn:active {
    transform: translateY(1px) scale(.995);
  }

  .btn--primary {
    background-image: var(--grad);
    background-size: 160% 160%;
    background-position: 0 50%;
    color: #fff;
    box-shadow: var(--glow);
  }

  .btn--ghost {
    border-color: var(--line-strong);
    background: rgb(255 255 255 / .7);
    color: var(--text);
    box-shadow: var(--sh-xs);
  }

  .btn--onink {
    border-color: rgb(255 255 255 / .28);
    background: rgb(255 255 255 / .08);
    color: #fff;
  }

  .btn--sm {
    min-block-size: 42px; padding: .55em 1em; font-size: .9rem;
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn--primary:hover {
    color: #fff;
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 22px 44px -18px rgb(30 91 255 / .7);
  }

  .btn--ghost:hover {
    color: var(--blue); border-color: rgb(30 91 255 / .45); transform: translateY(-2px); box-shadow: var(--sh-md);
  }

  .btn--onink:hover {
    background: rgb(255 255 255 / .16); color: #fff;
  }

  .eyebrow--onink {
    background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .18); color: #CBD9FF;
  }

  .lead--onink {
    color: #B9C7E6;
  }

  .icon-chip--lg {
    inline-size: 54px; block-size: 54px; border-radius: 17px;
  }

  .icon-chip--onaccent {
    background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .3); color: #fff;
  }

  .link-arrow .icon {
    inline-size: 17px; block-size: 17px; transition: transform var(--dur) var(--ease);
  }

  .link-arrow:hover .icon {
    transform: translateX(3px);
  }
}

@layer components {
  .hero {
    position: relative;
    padding-block: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)) clamp(3rem, 7vw, 6rem);
    overflow: clip;
    isolation: isolate;
  }

  .stage {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: clamp(320px, 42vw, 460px);
    container-type: inline-size;
  }

  .chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .42em .75em;
    border: 1px solid rgb(255 255 255 / .8);
    border-radius: var(--pill);
    background: rgb(255 255 255 / .84);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--sh-sm);
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
  }

  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: .5;
    will-change: transform;
    z-index: -1;
  }

  .hero__wash {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
    radial-gradient(900px 420px at 82% -10%, var(--hero-b), transparent 64%),
    radial-gradient(820px 400px at 6% -14%, var(--hero-a), transparent 62%),
    radial-gradient(620px 300px at 46% -26%, rgb(30 91 255 / .14), transparent 70%),
    linear-gradient(180deg, #E9F0FF 0%, #F1F6FF 32%, var(--bg) 76%);
  }

  .hero__inner {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
  }

  .hero__title {
    font-size: var(--fs-display);
  }

  .hero__title-accent {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero__sub {
    margin-block-start: 1.15rem; max-inline-size: 34rem;
  }

  .hero__actions {
    display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: 1.6rem;
  }

  .hero__strip {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 0;
    margin-block-start: 1.7rem;
    font-size: var(--fs-sm);
    color: var(--muted);
  }

  @media (width >= 62rem) {
    .hero__inner {
      grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    }
  }

  .hero__strip span {
    position: relative; padding-inline-end: 1.5em;
  }

  .hero__strip span:last-child {
    padding-inline-end: 0;
  }

  .hero__strip span:not(:last-child)::after {
    content: "·";
    position: absolute;
    inset-inline-end: .55em;
    color: var(--line-strong);
  }

  .stage__rings {
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: min(96%, 470px);
    aspect-ratio: 1;
    color: var(--blue);
    opacity: .5;
  }

  .stage__photo {
    position: relative;
    inline-size: min(88%, 420px);
    border-radius: 32px;
    border: 1px solid rgb(255 255 255 / .7);
    box-shadow: var(--sh-lg);
    overflow: clip;
    background: #fff;
  }

  .stage__chips {
    position: absolute; inset: 0; pointer-events: none;
  }

  .stage__rings circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    transform-origin: center;
    animation: ring-pulse 5s var(--ease) infinite;
  }

  .stage__rings circle:nth-child(2) {
    animation-delay: 1.2s;
  }

  .stage__rings circle:nth-child(3) {
    animation-delay: 2.4s;
  }

  .stage__rings circle:nth-child(4) {
    animation-delay: 3.6s;
  }

  @keyframes ring-pulse {
    0% {
      r: 14%; opacity: .55;
    }
    70% {
      opacity: .12;
    }
    100% {
      r: 48%; opacity: 0;
    }
  }

  .chip .icon {
    inline-size: 15px; block-size: 15px; color: var(--blue);
  }

  .chip--a {
    inset-block-start: 14%; inset-inline-start: 2%;
  }

  .chip--b {
    inset-block-start: 46%; inset-inline-end: 0;
  }

  .chip--c {
    inset-block-end: 14%; inset-inline-start: 8%;
  }

  @media (width <= 48rem) {
    .chip {
      font-size: .72rem;
    }

    .chip--c {
      display: none;
    }
  }

  .blob--1 {
    inline-size: 420px; block-size: 420px;
    inset-block-start: -140px; inset-inline-end: -90px;
    background: radial-gradient(circle at 30% 30%, rgb(47 128 255 / .5), rgb(122 92 255 / .26) 70%, transparent 72%);
    animation: drift 24s ease-in-out infinite alternate;
  }

  .blob--2 {
    inline-size: 320px; block-size: 320px;
    inset-block-end: -120px; inset-inline-start: -110px;
    background: radial-gradient(circle at 60% 40%, rgb(30 91 255 / .34), rgb(122 92 255 / .14) 70%, transparent 74%);
    animation: drift 30s ease-in-out infinite alternate-reverse;
  }

  @keyframes drift {
    from {
      transform: translate3d(0, 0, 0) scale(1);
    }
    to {
      transform: translate3d(-24px, 26px, 0) scale(1.08);
    }
  }
}

@layer components {
  .page-hero {
    position: relative;
    padding-block: calc(var(--header-h) + clamp(1.4rem, 4vw, 3rem)) clamp(2.4rem, 5vw, 3.6rem);
    overflow: clip;
    isolation: isolate;
    border-block-end: 1px solid var(--line);
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45em;
    font-size: var(--fs-sm);
    color: var(--muted);
  }

  .page-hero__wash {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
    radial-gradient(760px 360px at 88% -24%, var(--hero-b), transparent 62%),
    radial-gradient(700px 340px at 4% -20%, var(--hero-a), transparent 60%),
    linear-gradient(180deg, #EDF3FF 0%, var(--bg) 78%);
  }

  .page-hero__inner {
    max-inline-size: 52rem;
  }

  .page-hero h1 {
    margin-block-start: .85rem;
  }

  .page-hero .lead {
    margin-block-start: 1rem; max-inline-size: 46rem;
  }

  .breadcrumb a:hover {
    color: var(--blue);
  }

  .breadcrumb li {
    display: inline-flex; align-items: center; gap: .45em;
  }

  .breadcrumb li:not(:last-child)::after {
    content: "/"; color: var(--line-strong);
  }

  .breadcrumb [aria-current="page"] {
    color: var(--text-soft);
  }
}

@layer components {
  .section-head {
    display: grid;
    gap: .7rem;
    max-inline-size: 44rem;
    margin-block-end: clamp(1.8rem, 4vw, 2.8rem);
  }

  .grid {
    display: grid;
    gap: clamp(.9rem, 2vw, 1.25rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  }

  .card {
    position: relative;
    display: grid;
    gap: .6rem;
    align-content: start;
    padding: clamp(1.15rem, 2.4vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  }

  .list-checks {
    display: grid;
    gap: .55rem;
  }

  .proof {
    display: grid;
    gap: 1rem;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface-2);
  }

  .section-head--center {
    margin-inline: auto; text-align: center; justify-items: center;
  }

  .section-head .lead {
    margin-block-start: .2rem;
  }

  @media (width >= 48rem) {
    .grid--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 52rem) {
    .grid--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (width >= 62rem) {
    .grid--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad-line);
    opacity: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: opacity var(--dur) var(--ease);
    pointer-events: none;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: transparent;
  }

  .card__title {
    font-size: var(--fs-h3);
  }

  .card__text {
    color: var(--muted); font-size: var(--fs-sm); line-height: 1.6;
  }

  .card--soft {
    background: var(--surface-2); box-shadow: none;
  }

  .card--ink {
    border-color: rgb(255 255 255 / .12);
    background: rgb(255 255 255 / .06);
    color: #E9EFFC;
  }

  .card:hover::after {
    opacity: 1;
  }

  .card--link .link-arrow {
    margin-block-start: .35rem; font-size: .9rem;
  }

  .card--ink .card__text {
    color: #B9C7E6;
  }

  .list-checks li {
    position: relative;
    padding-inline-start: 1.65rem;
    color: var(--text-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }

  .list-checks li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .42em;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    background: var(--grad);
    opacity: .9;
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 3px, #000 3.5px);
    mask: radial-gradient(circle at 50% 50%, transparent 3px, #000 3.5px);
  }

  .proof__item {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: var(--fs-sm);
    color: var(--text-soft);
  }

  .proof__item .icon {
    color: var(--blue); inline-size: 18px; block-size: 18px; margin-block-start: .15em;
  }

  @media (width >= 56rem) {
    .proof {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

@layer components {
  .steps {
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    counter-reset: step;
  }

  .step {
    position: relative;
    display: grid;
    gap: .55rem;
    align-content: start;
    padding: clamp(1.1rem, 2.2vw, 1.45rem);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    counter-increment: step;
  }

  .timeline {
    position: relative;
    display: grid;
    gap: 1.5rem;
    padding-inline-start: 2rem;
  }

  .demo {
    display: grid;
    gap: .85rem;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background:
    radial-gradient(600px 240px at 100% 0%, rgb(122 92 255 / .10), transparent 60%),
    var(--surface);
    box-shadow: var(--sh-md);
  }

  @media (width >= 60rem) {
    .steps {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .step__num {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border-radius: 11px;
    background: var(--grad);
    color: #fff;
    font-family: var(--font-head);
    font-size: .82rem;
    font-weight: 800;
  }

  .step__title {
    font-size: var(--fs-h3);
  }

  .step__text {
    font-size: var(--fs-sm); color: var(--muted);
  }

  @media (width >= 60rem) {
    .step:not(:last-child)::after {
      content: "";
      position: absolute;
      inset-block-start: 2.05rem;
      inset-inline-end: -.7rem;
      inline-size: .7rem;
      block-size: 1px;
      background: var(--line-strong);
    }
  }

  .timeline::before {
    content: "";
    position: absolute;
    inset-block: .5rem;
    inset-inline-start: .55rem;
    inline-size: 2px;
    border-radius: 2px;
    background: var(--grad-line);
    opacity: .35;
  }

  .timeline__item {
    position: relative;
    display: grid;
    gap: .3rem;
  }

  .timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.72rem;
    inset-block-start: .3rem;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    border: 2px solid var(--blue);
    background: var(--bg);
  }

  .timeline__item .step-label {
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--blue);
  }

  .demo__bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-block-end: .7rem;
    border-block-end: 1px solid var(--line);
    font-size: var(--fs-xs);
    color: var(--muted);
  }

  .demo__dot {
    inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--line-strong);
  }

  .demo__live {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blue);
  }

  .demo__transcript {
    display: grid; gap: .45rem;
  }

  .demo__line {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr);
    gap: .6rem;
    padding: .45rem .55rem;
    border-radius: 10px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-soft);
    transition: background-color 260ms var(--ease);
  }

  .demo__out {
    display: grid;
    gap: .55rem;
    padding-block-start: .7rem;
    border-block-start: 1px dashed var(--line-strong);
  }

  .demo__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .6rem;
    align-items: start;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  }

  .demo__label {
    font-family: var(--font-head);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .demo__value {
    font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  }

  .demo__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    font-size: var(--fs-xs);
    color: var(--muted);
  }

  .demo__approve {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .5em .95em;
    border-radius: var(--pill);
    background: var(--ink);
    color: #fff;
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 700;
    transition: background-color 300ms var(--ease), transform 200ms var(--ease);
  }

  .demo__note {
    font-size: var(--fs-xs); color: var(--muted); font-style: italic;
  }

  .demo__line .who {
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    padding-block-start: .25em;
  }

  .demo__line.is-active {
    background: rgb(30 91 255 / .08);
  }

  .demo__line.is-active .who {
    color: var(--blue);
  }

  .demo__item.is-in {
    opacity: 1; transform: none;
  }

  .demo__item .icon {
    color: var(--blue); inline-size: 18px; block-size: 18px; margin-block-start: .1em;
  }

  .demo__approve.is-approved {
    background: #0F9D63;
  }

  .demo__approve .icon {
    inline-size: 15px; block-size: 15px;
  }
}

@layer components {
  .panel-grid {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.6rem);
  }

  .tabs__list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--surface-2);
    inline-size: fit-content;
    max-inline-size: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs__tab {
    min-block-size: 42px;
    padding: .55em 1.05em;
    border-radius: var(--pill);
    font-family: var(--font-head);
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-soft);
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .tabs__panel {
    margin-block-start: clamp(1.2rem, 3vw, 2rem);
  }

  .tabs__list::-webkit-scrollbar {
    display: none;
  }

  .tabs__tab:hover {
    color: var(--text);
  }

  .tabs__tab[aria-selected="true"] {
    background: var(--surface);
    color: var(--blue);
    box-shadow: var(--sh-sm);
  }

  .tabs__panel:focus-visible {
    outline-offset: 6px;
  }

  .panel-grid__col {
    padding: clamp(1.1rem, 2.2vw, 1.5rem);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
  }

  .panel-grid__label {
    display: flex;
    align-items: center;
    gap: .45em;
    margin-block-end: .6rem;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }

  @media (width >= 56rem) {
    .panel-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .panel-grid__label .icon {
    inline-size: 15px; block-size: 15px; color: var(--blue);
  }
}

@layer components {
  .accordion {
    display: grid;
    gap: .6rem;
  }

  .accordion__item {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    overflow: clip;
  }

  .accordion__item[open] {
    border-color: rgb(30 91 255 / .28); box-shadow: var(--sh-sm);
  }

  .accordion__item summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-block-size: 56px;
    padding: .95rem 1.1rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    transition: color var(--dur) var(--ease);
  }

  .accordion__item[open] summary .accordion__sign::after {
    transform: rotate(0deg);
  }

  .accordion__item[open] summary {
    color: var(--blue);
  }

  .accordion__item .accordion__body {
    padding: 0 1.1rem 1.1rem;
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.65;
  }

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

  .accordion__item summary:hover {
    color: var(--blue);
  }

  .accordion__item summary .accordion__sign {
    position: relative;
    margin-inline-start: auto;
    inline-size: 20px;
    block-size: 20px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
  }

  .accordion__item summary .accordion__sign::before, .accordion__item summary .accordion__sign::after {
    content: "";
    position: absolute;
    inset: 50% 25%;
    block-size: 1.5px;
    margin-block-start: -.75px;
    border-radius: 1px;
    background: currentColor;
    transition: transform var(--dur) var(--ease);
  }

  .accordion__item summary .accordion__sign::after {
    transform: rotate(90deg);
  }

  .accordion__item .accordion__body > * + * {
    margin-block-start: .6rem;
  }
}

@layer components {
  .table {
    inline-size: 100%;
    font-size: var(--fs-sm);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: clip;
  }

  .table thead th {
    padding: .7rem .9rem;
    background: var(--surface-2);
    text-align: start;
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    border-block-end: 1px solid var(--line);
  }

  .table tbody td {
    padding: .8rem .9rem;
    border-block-end: 1px solid var(--line);
    color: var(--text-soft);
    vertical-align: top;
  }

  .table tbody tr:last-child td {
    border-block-end: 0;
  }

  .table strong {
    color: var(--text);
  }

  @media (width <= 44rem) {
    .table--stack {
      display: block;
      border: 0;
      border-radius: 0;
    }

    .table--stack thead {
      display: none;
    }

    .table--stack tbody {
      display: grid; gap: .6rem;
    }

    .table--stack tr {
      display: block;
      padding: .5rem 0;
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      background: var(--surface);
    }

    .table--stack td {
      display: grid;
      grid-template-columns: 6.5rem minmax(0, 1fr);
      gap: .6rem;
      padding: .45rem .85rem;
      border: 0;
      font-size: var(--fs-sm);
    }

    .table--stack td::before {
      content: attr(data-label);
      font-family: var(--font-head);
      font-size: .66rem;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: var(--muted);
      padding-block-start: .2em;
    }
  }
}

@layer components {
  .lang-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3em .7em;
    border-radius: var(--pill);
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .lang-chips__chip {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    min-block-size: 44px;
    padding: .55em 1em;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--surface);
    font-family: var(--font-head);
    font-size: .9rem;
    font-weight: 700;
  }

  .lang-chips__chip .status {
    padding: .2em .55em;
    border-radius: var(--pill);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--surface-2);
    color: var(--muted);
  }

  .lang-chips__chip--first {
    border-color: rgb(30 91 255 / .3);
    background: rgb(30 91 255 / .05);
  }

  .lang-chips__chip--next .status {
    background: rgb(122 92 255 / .12); color: #5C43C9;
  }

  .lang-chips__chip--first .status {
    background: rgb(30 91 255 / .12); color: #1948C8;
  }

  .pill--ok {
    background: rgb(15 157 99 / .12); color: #0B7A4C;
  }

  .pill--pilot {
    background: rgb(30 91 255 / .12); color: #1948C8;
  }

  .pill--plan {
    background: rgb(122 92 255 / .14); color: #5C43C9;
  }

  .pill--soft {
    background: var(--surface-2); color: var(--muted);
  }
}

@layer components {
  .cta-band {
    position: relative;
    overflow: clip;
    padding-block: clamp(2.6rem, 6vw, 4.5rem);
    background:
    radial-gradient(700px 320px at 12% 0%, rgb(47 128 255 / .22), transparent 60%),
    radial-gradient(680px 320px at 88% 100%, rgb(122 92 255 / .20), transparent 62%),
    #070C1C;
    color: #E9EFFC;
    isolation: isolate;
  }

  .form {
    display: grid;
    gap: 1rem;
    padding: clamp(1.15rem, 3vw, 1.9rem);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-md);
  }

  .field {
    display: grid;
    gap: .38rem;
  }

  .hp {
    position: absolute;
    inset-inline-start: -9999px;
    block-size: 1px;
    overflow: hidden;
  }

  .footer {
    border-block-start: 1px solid var(--line);
    background: var(--surface-2);
    padding-block: clamp(2.4rem, 5vw, 3.6rem) 1.4rem;
  }

  .toast {
    position: fixed;
    inset-block-end: 1.2rem;
    inset-inline: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }

  .callout {
    display: grid;
    gap: .4rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--blue);
    border-radius: var(--r-sm);
    background: var(--surface-2);
  }

  .media-frame {
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: clip;
    background: var(--surface);
    box-shadow: var(--sh-md);
  }

  .note {
    font-size: var(--fs-xs); color: var(--muted);
  }

  .evidence {
    display: grid;
    gap: 1rem;
  }

  .error-page {
    display: grid;
    place-content: center;
    min-block-size: 100svb;
    padding-block: calc(var(--header-h) + 3rem) 3rem;
    text-align: center;
    gap: .9rem;
    justify-items: center;
  }

  .cta-band__inner {
    display: grid;
    gap: 1.4rem;
    align-items: center;
  }

  .cta-band h2 {
    color: #fff; max-inline-size: 26ch;
  }

  .cta-band p {
    color: #B9C7E6; margin-block-start: .6rem; max-inline-size: 46ch;
  }

  .cta-band__actions {
    display: flex; flex-wrap: wrap; gap: .7rem;
  }

  @media (width >= 60rem) {
    .cta-band__inner {
      grid-template-columns: minmax(0, 1.4fr) auto;
    }
  }

  .form__row {
    display: grid;
    gap: 1rem;
  }

  .form__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 800;
  }

  .form__req {
    font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; color: var(--muted);
  }

  .form__fineprint {
    font-size: var(--fs-xs); color: var(--muted);
  }

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

  .form__success {
    display: flex;
    gap: .7rem;
    padding: .9rem 1rem;
    border: 1px solid rgb(15 157 99 / .28);
    border-radius: var(--r-sm);
    background: rgb(15 157 99 / .08);
    color: #0B7A4C;
    font-size: var(--fs-sm);
  }

  .form__success-title {
    font-family: var(--font-head); font-weight: 800;
  }

  .form__success-text {
    margin-block-start: .2rem;
  }

  .form__success-text a {
    color: #0B7A4C; text-decoration: underline;
  }

  @media (width >= 40rem) {
    .form__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .form__success .icon {
    inline-size: 20px; block-size: 20px; flex: none; margin-block-start: .1rem;
  }

  .field label {
    font-family: var(--font-head);
    font-size: .84rem;
    font-weight: 700;
    color: var(--text-soft);
  }

  .field label span {
    color: var(--blue);
  }

  .field input, .field select, .field textarea {
    inline-size: 100%;
    min-block-size: 46px;
    padding: .65rem .8rem;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    font-size: .95rem;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }

  .field textarea {
    min-block-size: 104px; resize: vertical;
  }

  .field__error {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #B03A34;
  }

  .field input::placeholder, .field select::placeholder, .field textarea::placeholder {
    color: #98A2BC;
  }

  .field input:hover, .field select:hover, .field textarea:hover {
    border-color: #BFCBEA;
  }

  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(30 91 255 / .16);
  }

  .field:has(input[aria-invalid="true"] input, .field select[aria-invalid="true"] input, .field textarea[aria-invalid="true"]) input, .field:has(input[aria-invalid="true"] select, .field select[aria-invalid="true"] select, .field textarea[aria-invalid="true"]) select, .field:has(input[aria-invalid="true"] textarea, .field select[aria-invalid="true"] textarea, .field textarea[aria-invalid="true"]) textarea {
    border-color: #D2453E; box-shadow: 0 0 0 3px rgb(210 69 62 / .12);
  }

  .field:has(input[aria-invalid="true"] label, .field select[aria-invalid="true"] label, .field textarea[aria-invalid="true"]) label {
    color: #B03A34;
  }

  .footer__inner {
    display: grid;
    gap: clamp(1.8rem, 4vw, 3rem);
  }

  .footer__brand {
    display: grid; gap: .7rem; align-content: start; max-inline-size: 26rem;
  }

  .footer__tagline {
    font-family: var(--font-head); font-weight: 700; color: var(--text-soft); font-size: .95rem;
  }

  .footer__desc {
    font-size: var(--fs-sm); color: var(--muted);
  }

  .footer__social {
    display: flex;
    gap: .5rem;
    margin-block-start: .3rem;
  }

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

  .footer__heading {
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin-block-end: .55rem;
  }

  .footer__col ul {
    display: grid; gap: .4rem;
  }

  .footer__col a {
    font-size: var(--fs-sm);
    color: var(--text-soft);
  }

  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-block-start: clamp(1.8rem, 4vw, 2.6rem);
    padding-block-start: 1.2rem;
    border-block-start: 1px solid var(--line);
    font-size: var(--fs-xs);
    color: var(--muted);
  }

  @media (width >= 56rem) {
    .footer__inner {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    }
  }

  .footer__social a {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text-soft);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }

  .footer__social a:hover {
    color: var(--blue); border-color: rgb(30 91 255 / .4); transform: translateY(-2px);
  }

  .footer__social a .icon {
    inline-size: 18px; block-size: 18px;
  }

  @media (width >= 48rem) {
    .footer__nav {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .footer__col a:hover {
    color: var(--blue);
  }

  .footer__bottom ul {
    display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  }

  .footer__bottom a:hover {
    color: var(--blue);
  }

  .toast__inner {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: var(--surface);
    box-shadow: var(--sh-lg);
    font-family: var(--font-head);
    font-size: .88rem;
    font-weight: 700;
    animation: toast-in 240ms var(--ease-out) both;
  }

  @keyframes toast-in {
    from {
      opacity: 0; transform: translateY(10px);
    }
    to {
      opacity: 1; transform: none;
    }
  }

  .callout p {
    font-size: var(--fs-sm); color: var(--text-soft);
  }

  .callout__label {
    font-family: var(--font-head);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
  }

  .media-frame img {
    inline-size: 100%;
  }

  .media-frame figcaption {
    padding: .7rem .9rem;
    border-block-start: 1px solid var(--line);
    font-size: var(--fs-xs);
    color: var(--muted);
    background: var(--surface-2);
  }

  .evidence__list {
    display: grid; gap: .5rem;
  }

  .evidence__btn {
    display: grid;
    gap: .15rem;
    inline-size: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    text-align: start;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  .evidence__lines {
    display: grid;
    gap: .35rem;
    align-content: start;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: var(--surface-2);
  }

  @media (width >= 56rem) {
    .evidence {
      grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    }
  }

  .evidence__btn:hover {
    border-color: rgb(30 91 255 / .4);
  }

  .evidence__btn[aria-pressed="true"] {
    border-color: rgb(30 91 255 / .45);
    background: rgb(30 91 255 / .06);
  }

  .evidence__btn .label {
    font-family: var(--font-head);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--blue);
  }

  .evidence__btn .value {
    font-size: var(--fs-sm); font-weight: 600;
  }

  .evidence__lines .demo__line.is-highlight {
    background: rgb(255 214 102 / .28);
  }

  .evidence__lines .demo__line {
    transition: background-color 240ms var(--ease);
  }

  .error-page__code {
    font-family: var(--font-head);
    font-size: clamp(3.5rem, 12vw, 7rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@layer motion {
  .site-header {
    view-transition-name: site-header;
  }

  .hero__title, .page-hero__inner h1 {
    view-transition-name: page-title;
  }

  ::view-transition-old(root) {
    animation: vt-out 180ms var(--ease) both;
  }

  ::view-transition-new(root) {
    animation: vt-in 300ms var(--ease-out) both;
  }

  .js [data-reveal] {
    opacity: 0;
    translate: 0 12px;
    transition: opacity 520ms var(--ease), translate 520ms var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js [data-reveal].is-visible {
    opacity: 1; translate: none;
  }

  @view-transition {
    navigation: auto;
  }

  @keyframes vt-out {
    to {
      opacity: 0;
    }
  }

  @keyframes vt-in {
    from {
      opacity: 0; transform: translateY(12px);
    }
    to {
      opacity: 1; transform: none;
    }
  }

  @supports (animation-timeline: view()) {
    .js [data-reveal] {
      opacity: 1;
      translate: none;
      transition: none;
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 6% cover 26%;
    }

    @keyframes reveal-rise {
      from {
        opacity: 0; translate: 0 16px;
      }
      to {
        opacity: 1; translate: 0 0;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

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

    .js [data-reveal] {
      opacity: 1 !important; translate: none !important; animation: none !important;
    }

    .stage__rings circle, .blob {
      animation: none !important;
    }

    .demo__line, .demo__item {
      transition: none !important; opacity: 1 !important; transform: none !important;
    }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .text-center {
    text-align: center;
  }

  .mt-0 {
    margin-block-start: 0;
  }

  .mt-s {
    margin-block-start: .6rem;
  }

  .mt-m {
    margin-block-start: 1.2rem;
  }

  .mt-l {
    margin-block-start: 2rem;
  }

  .mb-m {
    margin-block-end: 1.2rem;
  }

  .max-44 {
    max-inline-size: 44rem;
  }

  .max-56 {
    max-inline-size: 56rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #080D1E;
    --surface: #0E1730;
    --surface-2: #0A1128;
    --text: #E9EFFC;
    --text-soft: #C9D4EE;
    --muted: #94A3C4;
    --line: #1D2947;
    --line-strong: #2A3A5E;
    --soft: #121C38;
    --glass: linear-gradient(135deg, rgb(30 44 78 / .58) 0%, rgb(15 24 50 / .48) 55%, rgb(10 16 36 / .44) 100%);
    --glass-scrolled: linear-gradient(135deg, rgb(22 32 60 / .92), rgb(11 18 38 / .86));
    --glass-edge: linear-gradient(120deg, rgb(255 255 255 / .26) 0%, rgb(122 92 255 / .34) 38%, rgb(47 128 255 / .34) 70%, rgb(255 255 255 / .16) 100%);
    --sh-md: 0 12px 28px -18px rgb(0 0 0 / .8);
    --sh-lg: 0 30px 60px -30px rgb(0 0 0 / .9);
  }

  .brand__meets {
    color: #E9EFFC;
  }

  .eyebrow {
    color: #A9C4FF; border-color: rgb(127 176 255 / .24); background: rgb(127 176 255 / .10);
  }

  .btn--ghost {
    background: rgb(255 255 255 / .06);
  }

  .btn--ghost:hover {
    color: #A9C4FF;
  }

  .nav__link[aria-current="page"] {
    color: #A9C4FF;
  }

  .hero__wash, .page-hero__wash {
    background:
    radial-gradient(900px 420px at 82% -10%, rgb(122 92 255 / .34), transparent 64%),
    radial-gradient(820px 400px at 6% -14%, rgb(30 91 255 / .36), transparent 62%),
    linear-gradient(180deg, #0C1530 0%, var(--bg) 62%);
  }

  .field input::placeholder, .field textarea::placeholder {
    color: #6C7C9E;
  }

  .form__success {
    background: rgb(18 185 129 / .12); color: #6EE7B7; border-color: rgb(18 185 129 / .3);
  }

  .form__success-text a {
    color: #6EE7B7;
  }

  .callout__label {
    color: #A9C4FF;
  }

  .chip {
    background: rgb(16 25 48 / .82); border-color: rgb(255 255 255 / .12); color: var(--text-soft);
  }

  .pill--ok {
    background: rgb(18 185 129 / .16); color: #6EE7B7;
  }

  .pill--pilot {
    background: rgb(127 176 255 / .16); color: #A9C4FF;
  }

  .pill--plan {
    background: rgb(179 155 255 / .16); color: #B39BFF;
  }

  .lang-chips__chip--first {
    background: rgb(127 176 255 / .12); border-color: rgb(127 176 255 / .3);
  }

  .lang-chips__chip--first .status {
    background: rgb(127 176 255 / .18); color: #A9C4FF;
  }

  .lang-chips__chip--next .status {
    background: rgb(179 155 255 / .18); color: #B39BFF;
  }

  .demo__approve {
    background: #1D2947;
  }

  .evidence__lines {
    background: #0A1128;
  }

  .evidence__lines .demo__line.is-highlight {
    background: rgb(255 214 102 / .16);
  }

  .stage__photo {
    background: #0E1730; border-color: rgb(255 255 255 / .1);
  }

  .footer {
    background: #070C1B;
  }

  .section--soft {
    background: #0A1128;
  }

  .menu-toggle {
    background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .14);
  }

  .menu-toggle:hover {
    background: rgb(127 176 255 / .16);
  }
}

@media print {
  .site-header, .mobile-menu, .hero__wash, .page-hero__wash, .blob, .cta-band__actions, .stage__rings {
    display: none;
  }

  body {
    color: #000; background: #fff;
  }

  .section {
    padding-block: 1.2rem;
  }

  .card, .step {
    border-color: #ccc; box-shadow: none;
  }
}

@layer utilities {
  .sprite {
    position: absolute; inline-size: 0; block-size: 0; overflow: hidden;
  }

  .section--flush {
    padding-block-start: 0;
  }

  .diagram {
    display: block; inline-size: 100%; block-size: auto;
  }

  .cluster--tight {
    gap: .55rem 1rem;
  }

  .cluster--center {
    justify-content: center;
  }

  .self-start {
    align-self: start;
  }
}