:root {
      --ink: #101828;
      --surface: #ffffff;
      --muted: #667085;
      --line: #d9e2ec;
      --navy: #17213f;
      --blue: #316db3;
      --teal: #0f9f9a;
      --amber: #c47b21;
      --red: #b93838;
      --soft: #f4f7fb;
      --dark: #0b1020;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: Inter, Montserrat, Arial, sans-serif;
      color: var(--ink);
      background: var(--surface);
      line-height: 1.6;
      text-rendering: optimizeLegibility;
    }

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

    img {
      max-width: 100%;
      height: auto;
    }

    .skip-link {
      position: absolute;
      left: 1rem;
      top: -4rem;
      z-index: 1000;
      padding: .75rem 1rem;
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 6px;
    }

    .skip-link:focus {
      top: 1rem;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, .94);
      border-bottom: 1px solid rgba(217, 226, 236, .85);
      backdrop-filter: blur(12px);
    }

    .brand-mark img {
      height: 30px;
      width: auto;
    }

    .brand-name {
      font-weight: 800;
      color: var(--navy);
      white-space: nowrap;
    }

    .nav-link {
      color: #344054;
      font-size: .94rem;
      font-weight: 700;
    }

    .nav-link:hover,
    .nav-link:focus {
      color: var(--blue);
    }

    .nav-link.active {
      color: var(--blue);
    }

    .btn {
      border-radius: 6px;
      font-weight: 800;
    }

    .btn-primary {
      background: var(--blue);
      border-color: var(--blue);
    }

    .btn-primary:hover,
    .btn-primary:focus {
      background: #285c98;
      border-color: #285c98;
    }

    .btn-outline-primary {
      color: var(--blue);
      border-color: var(--blue);
    }

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
      background: var(--blue);
      border-color: var(--blue);
    }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 720px;
      color: #fff;
      background:
        linear-gradient(90deg, rgba(7, 11, 22, .98) 0%, rgba(7, 11, 22, .92) 38%, rgba(7, 11, 22, .45) 78%, rgba(7, 11, 22, .3) 100%),
        radial-gradient(circle at 72% 44%, rgba(49, 109, 179, .32), transparent 31%),
        radial-gradient(circle at 84% 72%, rgba(15, 159, 154, .22), transparent 26%),
        linear-gradient(135deg, #070b16 0%, #101828 54%, #0a1626 100%);
      display: flex;
      align-items: stretch;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(115deg, transparent 0%, rgba(183, 255, 246, .045) 45%, transparent 46%),
        radial-gradient(circle at 22% 38%, rgba(15, 159, 154, .13), transparent 25%),
        radial-gradient(circle at 70% 56%, rgba(49, 109, 179, .18), transparent 30%);
      mix-blend-mode: screen;
    }

    .ai-life-canvas {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: 1;
    }

    .trace-terminal {
      position: absolute;
      right: clamp(.75rem, 3vw, 2rem);
      bottom: clamp(.4rem, 2vw, 1rem);
      z-index: 2;
      width: min(390px, 68%);
      height: 185px;
      overflow: hidden;
      pointer-events: none;
      color: rgba(183, 255, 246, .62);
      background:
        linear-gradient(180deg, rgba(5, 12, 24, .74), rgba(5, 12, 24, .42)),
        rgba(5, 12, 24, .42);
      border: 1px solid rgba(183, 255, 246, .13);
      border-radius: 8px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, .24), inset 0 0 45px rgba(49, 109, 179, .08);
      opacity: .62;
      transform: perspective(900px) rotateX(2deg) rotateY(-5deg);
      filter: blur(.08px);
      mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
    }

    .trace-terminal::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 4px);
      mix-blend-mode: screen;
      opacity: .26;
    }

    .trace-terminal-bar {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: .4rem;
      height: 32px;
      padding: 0 .75rem;
      color: rgba(229, 237, 247, .58);
      background: rgba(255, 255, 255, .035);
      border-bottom: 1px solid rgba(183, 255, 246, .1);
      font: 700 10px/1 Inter, Arial, sans-serif;
      letter-spacing: .02em;
    }

    .trace-terminal-bar span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(183, 255, 246, .38);
    }

    .trace-terminal-bar span:nth-child(2) {
      background: rgba(255, 179, 85, .45);
    }

    .trace-terminal-bar span:nth-child(3) {
      background: rgba(255, 90, 104, .38);
    }

    .trace-terminal-bar strong {
      margin-left: .35rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .trace-terminal-stream {
      position: relative;
      z-index: 1;
      height: calc(100% - 32px);
      padding: .75rem .85rem 1.2rem;
      overflow: hidden;
      font: 500 10px/1.62 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
      letter-spacing: 0;
      text-shadow: 0 0 11px rgba(183, 255, 246, .2);
    }

    .trace-line {
      display: block;
      white-space: nowrap;
      opacity: .72;
    }

    .trace-line[data-state="ok"] {
      color: rgba(57, 217, 138, .7);
    }

    .trace-line[data-state="ai"] {
      color: rgba(255, 179, 85, .76);
    }

    .trace-line[data-state="blocked"] {
      color: rgba(255, 90, 104, .72);
    }

    .trace-line[data-state="scan"] {
      color: rgba(183, 255, 246, .64);
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 6rem 0 5rem;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: center;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      max-width: 760px;
    }

    .hero-visual {
      position: relative;
      z-index: 1;
      min-height: 560px;
      border-radius: 8px;
      overflow: hidden;
      padding: 1rem;
      background:
        radial-gradient(circle at 48% 46%, rgba(49, 109, 179, .22), transparent 38%),
        radial-gradient(circle at 72% 68%, rgba(15, 159, 154, .14), transparent 34%);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      margin-bottom: 1.25rem;
      color: #b7fff6;
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .hero h1 {
      max-width: 760px;
      margin: 0 0 1.25rem;
      font-size: 4rem;
      line-height: .98;
      font-weight: 900;
      letter-spacing: 0;
    }

    .hero-lead {
      max-width: 720px;
      color: #e5edf7;
      font-size: 1.16rem;
      margin-bottom: 1.75rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      margin-bottom: 1.85rem;
    }

    .hero-proof {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .75rem;
      max-width: 760px;
    }

    .proof-item {
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 8px;
      padding: .9rem;
      background: rgba(255, 255, 255, .07);
      min-height: 98px;
    }

    .proof-item strong {
      display: block;
      color: #fff;
      font-size: .95rem;
      margin-bottom: .25rem;
    }

    .proof-item span {
      color: #cbd5e1;
      font-size: .84rem;
    }

    .section {
      padding: 5.5rem 0;
    }

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

    .section-dark {
      color: #fff;
      background: var(--dark);
    }

    .section-kicker {
      color: var(--teal);
      font-size: .8rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: .75rem;
    }

    .section-title {
      color: var(--navy);
      font-size: 2.45rem;
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: 0;
      margin-bottom: 1rem;
    }

    .section-dark .section-title,
    .section-dark .section-kicker {
      color: #fff;
    }

    .section-copy {
      color: var(--muted);
      font-size: 1.08rem;
      max-width: 790px;
    }

    .section-dark .section-copy {
      color: #cbd5e1;
    }

    .trust-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--line);
    }

    .trust-strip span {
      display: flex;
      align-items: center;
      gap: .55rem;
      min-height: 76px;
      padding: 1rem;
      color: #26364e;
      background: #fff;
      font-weight: 900;
    }

    .position-panel {
      height: 100%;
      padding: 1.5rem;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
    }

    .position-panel h3 {
      color: #fff;
      font-size: 1.05rem;
      font-weight: 900;
      margin-bottom: .55rem;
    }

    .position-panel p {
      color: #cbd5e1;
      margin-bottom: 0;
    }

    .card-flat {
      height: 100%;
      padding: 1.5rem;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 16px 36px rgba(16, 24, 40, .06);
    }

    .card-flat h3,
    .card-flat h4 {
      color: var(--navy);
      font-size: 1.08rem;
      font-weight: 900;
      margin-bottom: .65rem;
    }

    .card-flat p,
    .card-flat li {
      color: #475467;
    }

    .icon-tile {
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      color: #fff;
      background: var(--blue);
      border-radius: 8px;
      font-size: 1.2rem;
    }

    .icon-tile.teal {
      background: var(--teal);
    }

    .icon-tile.amber {
      background: var(--amber);
    }

    .icon-tile.red {
      background: var(--red);
    }

    .risk-row {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 1rem;
      align-items: start;
      padding: 1.1rem 0;
      border-bottom: 1px solid var(--line);
    }

    .risk-row:last-child {
      border-bottom: 0;
    }

    .risk-row i {
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      color: var(--red);
      background: #fff2f2;
    }

    .risk-row h3 {
      margin: 0 0 .2rem;
      font-size: 1rem;
      font-weight: 900;
      color: var(--navy);
    }

    .risk-row p {
      margin: 0;
      color: var(--muted);
    }

    .method {
      counter-reset: step;
    }

    .method-step {
      position: relative;
      min-height: 100%;
      padding: 1.4rem;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 8px;
      background: rgba(255, 255, 255, .06);
    }

    .method-step::before {
      counter-increment: step;
      content: counter(step);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      margin-bottom: 1rem;
      border-radius: 8px;
      color: #08111f;
      background: #b7fff6;
      font-weight: 900;
    }

    .method-step h3 {
      font-size: 1.04rem;
      font-weight: 900;
      margin-bottom: .5rem;
    }

    .method-step p {
      color: #cbd5e1;
      margin-bottom: 0;
    }

    .deliverable {
      display: flex;
      gap: .9rem;
      padding: 1rem 0;
      border-bottom: 1px solid rgba(217, 226, 236, .8);
    }

    .deliverable:last-child {
      border-bottom: 0;
    }

    .deliverable i {
      color: var(--teal);
      margin-top: .25rem;
    }

    .deliverable strong {
      display: block;
      color: var(--navy);
      margin-bottom: .1rem;
    }

    .deliverable span {
      color: var(--muted);
    }

    .signal-panel {
      margin-top: 1rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      overflow: hidden;
    }

    .signal-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      background: #f8fafc;
      border-bottom: 1px solid var(--line);
    }

    .signal-tabs button {
      min-height: 54px;
      border: 0;
      border-right: 1px solid var(--line);
      background: transparent;
      color: #344054;
      font-weight: 900;
    }

    .signal-tabs button:last-child {
      border-right: 0;
    }

    .signal-tabs button.active {
      color: #fff;
      background: var(--navy);
    }

    .signal-body {
      padding: 1.35rem;
    }

    .signal-body h3 {
      color: var(--navy);
      font-size: 1.15rem;
      font-weight: 900;
      margin-bottom: .5rem;
    }

    .signal-body p {
      color: var(--muted);
      margin-bottom: 1rem;
    }

    .signal-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .65rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .signal-list li {
      display: flex;
      gap: .5rem;
      color: #344054;
      font-weight: 700;
    }

    .signal-list i {
      color: var(--teal);
      margin-top: .25rem;
    }

    .service-card {
      border-top: 4px solid var(--blue);
    }

    .service-controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .55rem;
      margin-bottom: 1.5rem;
    }

    .service-controls button {
      min-height: 42px;
      padding: .45rem .8rem;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: #344054;
      background: #fff;
      font-weight: 900;
    }

    .service-controls button.active {
      color: #fff;
      border-color: var(--navy);
      background: var(--navy);
    }

    [data-service-card].is-hidden {
      display: none;
    }

    .service-card ul {
      padding-left: 1.15rem;
      margin: 1rem 0 0;
    }

    .service-card li + li {
      margin-top: .45rem;
    }

    .chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-top: 1.5rem;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .55rem .7rem;
      color: #26364e;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 6px;
      font-weight: 800;
      font-size: .9rem;
    }

    .persona {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: .9rem;
      align-items: start;
    }

    .persona i {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      color: #fff;
      background: var(--navy);
    }

    .persona h3 {
      margin-bottom: .25rem;
    }

    .apps-menu {
      min-width: 390px;
      border: 0;
      border-radius: 8px;
      box-shadow: 0 22px 50px rgba(16, 24, 40, .18);
    }

    .apps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .65rem;
    }

    .app-btn {
      min-height: 86px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      padding: .7rem .35rem;
      border-radius: 8px;
      color: #344054;
      background: #f8fafc;
      text-align: center;
      font-weight: 800;
      font-size: .75rem;
    }

    .app-btn:hover,
    .app-btn.active {
      color: var(--blue);
      background: #eaf2fd;
    }

    .app-btn i {
      font-size: 1.25rem;
    }

    .app-logo img {
      height: 23px;
      width: auto;
      filter: grayscale(100%) brightness(0);
    }

    .cta-band {
      color: #fff;
      background:
        linear-gradient(90deg, rgba(23, 33, 63, .98), rgba(15, 159, 154, .72)),
        radial-gradient(circle at 82% 45%, rgba(183, 255, 246, .18), transparent 30%),
        #0b1020;
    }

    .footer {
      color: #cbd5e1;
      background: #070b16;
      font-size: .92rem;
    }

    .footer a {
      color: #fff;
      font-weight: 800;
    }

    @media (max-width: 991.98px) {
      .hero {
        min-height: auto;
        background:
          linear-gradient(180deg, rgba(7, 11, 22, .98) 0%, rgba(7, 11, 22, .9) 52%, rgba(7, 11, 22, .68) 100%),
          radial-gradient(circle at 70% 50%, rgba(49, 109, 179, .28), transparent 36%),
          radial-gradient(circle at 80% 76%, rgba(15, 159, 154, .18), transparent 32%),
          linear-gradient(135deg, #070b16 0%, #101828 54%, #0a1626 100%);
      }

      .hero-inner {
        padding: 5rem 0 4rem;
      }

      .hero-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
      }

      .hero-copy {
        max-width: 760px;
      }

      .hero-visual {
        width: 100%;
        min-height: 430px;
        padding: .75rem;
        order: 2;
      }

      .hero h1 {
        font-size: 2.95rem;
        margin-bottom: 1rem;
      }

      .hero-lead {
        font-size: 1.05rem;
        margin-bottom: 1.4rem;
      }

      .hero-actions {
        margin-bottom: 1.45rem;
      }

      .hero-proof {
        grid-template-columns: 1fr;
        gap: .6rem;
      }

      .proof-item {
        min-height: auto;
        padding: .8rem;
      }

      .trace-terminal {
        width: min(360px, 60vw);
        height: 170px;
        opacity: .38;
        transform: none;
      }

      .trust-strip,
      .signal-tabs,
      .signal-list {
        grid-template-columns: 1fr;
      }

      .section {
        padding: 4rem 0;
      }

      .section-title {
        font-size: 2rem;
      }
    }

    @media (max-width: 575.98px) {
      .hero h1 {
        font-size: 2.25rem;
      }

      .hero-lead {
        font-size: 1rem;
        margin-bottom: 1.2rem;
      }

      .hero-actions .btn-lg {
        padding: .65rem .9rem;
        font-size: .95rem;
      }

      .hero-inner {
        padding: 4rem 0 3rem;
      }

      .hero-visual {
        min-height: 340px;
        padding: .5rem;
      }

      .apps-menu {
        min-width: 320px;
      }

      .apps-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .trace-terminal {
        right: .65rem;
        bottom: .65rem;
        width: min(240px, 54vw);
        height: 128px;
        opacity: .28;
      }

      .trace-terminal-bar strong {
        max-width: 145px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .trace-terminal-stream {
        font-size: 8px;
        line-height: 1.48;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .ai-life-canvas {
        display: none;
      }

      .trace-terminal {
        opacity: .3;
      }
    }