/* GRAVITY – home page styles (extracted from the original single-file build) */
    :root {
      --ink: #050d1f;
      --navy: #0a1a3a;
      --cyan: #4de3f0;
      --blue: #4a7dff;
      --paper: #eef3fb;
      --mut: #8a9bbd;
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px)
    }

    html {
      scroll-padding-top: env(safe-area-inset-top, 0px)
    }

    * {
      box-sizing: border-box;
      margin: 0
    }

    body {
      background: var(--ink);
      color: #fff;
      font-family: Sora, system-ui, sans-serif;
      font-weight: 300;
      overflow-x: hidden;
      line-height: 1.6
    }

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

    button {
      font: inherit;
      color: inherit;
      cursor: pointer;
      background: none;
      border: 0
    }

    :focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px
    }

    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 24px
    }

    h1,
    h2 {
      font-weight: 200;
      letter-spacing: -.04em;
      line-height: 1.03
    }

    h1 {
      font-size: clamp(46px, 8.2vw, 98px)
    }

    h2 {
      font-size: clamp(34px, 5vw, 64px)
    }

    .lab {
      font-size: 12px;
      color: var(--cyan);
      margin-bottom: 22px;
      display: flex;
      gap: 10px;
      align-items: center
    }

    .lab:before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 14px currentColor
    }

    .sec {
      padding: 140px 0;
      position: relative
    }

    .light {
      background: var(--paper);
      color: var(--navy)
    }

    .light .lab {
      color: var(--blue)
    }

    .mut {
      color: var(--mut)
    }

    .btn {
      display: inline-flex;
      gap: 14px;
      align-items: center;
      background: var(--cyan);
      color: var(--ink);
      padding: 15px 28px;
      font-size: 14px;
      font-weight: 600;
      transition: box-shadow .3s, transform .2s ease-out
    }

    .btn:hover {
      box-shadow: 0 10px 44px #4de3f066
    }

    .ghost {
      background: none;
      color: #fff;
      border: 1px solid #ffffff3a
    }

    .row {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      align-items: center
    }

    .grid2 {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 60px;
      align-items: end
    }

    nav {
      position: fixed;
      top: env(safe-area-inset-top, 0px);
      left: 0;
      right: 0;
      z-index: 50;
      transition: background .3s
    }

    nav.s {
      background: #050d1fd9;
      backdrop-filter: blur(14px)
    }

    nav .wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 72px
    }

    nav ul {
      display: flex;
      gap: 34px;
      list-style: none;
      padding: 0;
      font-size: 13px
    }

    nav ul a {
      opacity: .65;
      transition: opacity .2s
    }

    nav ul a:hover {
      opacity: 1
    }

    .logo {
      font-weight: 600;
      letter-spacing: .2em;
      font-size: 15px;
      display: flex;
      gap: 10px;
      align-items: center
    }

    #bar {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2px;
      width: 100%;
      background: linear-gradient(90deg, #00b7eb 25%, #ec008c 25% 50%, #ffed00 50% 75%, #fff 75%);
      height: 4px;
      transform-origin: 0 50%;
      transform: scaleX(0)
    }

    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: radial-gradient(ellipse at 72% 38%, #12357a 0, var(--ink) 62%)
    }

    .hero canvas {
      position: absolute;
      right: -2%;
      top: 0;
      width: 82%;
      height: 100%
    }

    .track span:nth-child(4n+1) {
      color: #00b7eb
    }

    .track span:nth-child(4n+2) {
      color: #ec008c
    }

    .track span:nth-child(4n+3) {
      color: #ffd400
    }

    .light {
      background-image: radial-gradient(#0a1a3a1f 1.2px, transparent 1.6px);
      background-size: 16px 16px
    }

    .lab:before {
      background: #ec008c
    }

    .hg {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 40px;
      align-items: center
    }

    .hm {
      background: radial-gradient(circle at 50% 45%, #12357a66, transparent 70%);
      border: 1px solid #ffffff14
    }

    @media(max-width:860px) {
      .hg {
        grid-template-columns: 1fr;
        padding-top: 110px !important
      }
    }

    .hero .wrap {
      position: relative;
      z-index: 2;
      width: 100%;
      padding-top: 80px
    }

    .hero p {
      max-width: 440px;
      margin: 28px 0 38px;
      color: #b9c6e0
    }

    .scrl {
      position: absolute;
      left: 50%;
      bottom: 26px;
      width: 1px;
      height: 54px;
      background: linear-gradient(var(--cyan), transparent);
      animation: dr 2s infinite
    }

    @keyframes dr {
      0% {
        transform: scaleY(0);
        transform-origin: top
      }

      50% {
        transform: scaleY(1);
        transform-origin: top
      }

      51% {
        transform-origin: bottom
      }

      100% {
        transform: scaleY(0);
        transform-origin: bottom
      }
    }

    .marq {
      overflow: hidden;
      border-block: 1px solid #ffffff14;
      padding: 26px 0
    }

    .track {
      display: flex;
      gap: 70px;
      width: max-content;
      animation: mq 34s linear infinite;
      color: #5d6f95;
      font-size: 20px;
      letter-spacing: .12em
    }

    .track:hover {
      animation-play-state: paused
    }

    @keyframes mq {
      to {
        transform: translateX(-50%)
      }
    }

    .pin {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden
    }

    .center {
      display: flex;
      align-items: center
    }

    .manif {
      font-size: clamp(30px, 5.2vw, 68px);
      line-height: 1.12;
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 24px;
      font-weight: 300
    }

    .manif span {
      opacity: .14
    }

    .stk {
      background: radial-gradient(ellipse at 75% 50%, #0f2c66, #060f26 70%)
    }

    .stk .in {
      position: relative;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      align-items: center
    }

    .stk canvas {
      position: absolute;
      right: -4%;
      top: 0;
      width: 62%;
      height: 100%
    }

    .stk .txt {
      position: relative;
      z-index: 2
    }

    .pan {
      position: relative;
      height: 210px;
      margin-top: 40px
    }

    .pan>div {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .6s, transform .6s
    }

    .pan>.on {
      opacity: 1;
      transform: none
    }

    .pan h3 {
      font-size: 46px;
      font-weight: 200;
      letter-spacing: -.03em
    }

    .pan p {
      color: #a8b8d8;
      max-width: 380px;
      margin-top: 10px
    }

    .rail {
      display: flex;
      gap: 10px;
      margin-top: 20px
    }

    .rail i {
      height: 3px;
      width: 46px;
      background: #ffffff22;
      transition: background .4s
    }

    .rail i.on {
      background: var(--cyan)
    }

    .hd {
      padding: 90px 24px 30px;
      max-width: 1180px;
      margin: 0 auto;
      width: 100%
    }

    .hz {
      display: flex;
      gap: 24px;
      padding: 0 max(24px, calc((100vw - 1180px)/2));
      will-change: transform
    }

    .pc {
      flex: 0 0 min(80vw, 470px);
      height: 58vh;
      display: flex;
      flex-direction: column;
      border: 1px solid #ffffff1a;
      background: #ffffff08
    }

    .pc .art {
      flex: 1;
      background: radial-gradient(circle at 50% 40%, #17408f66, transparent 70%);
      min-height: 0
    }

    .pc div.t {
      padding: 26px 28px 30px
    }

    .pc h3 {
      font-weight: 300;
      font-size: 26px;
      letter-spacing: -.02em
    }

    .pc p {
      color: var(--mut);
      font-size: 14px;
      margin: 8px 0 14px
    }

    .pbar {
      height: 2px;
      background: #ffffff1a;
      margin: 28px max(24px, calc((100vw - 1180px)/2)) 0
    }

    .pbar i {
      display: block;
      height: 100%;
      background: var(--cyan);
      transform-origin: 0;
      transform: scaleX(0)
    }

    .globe {
      background: var(--ink);
      overflow: hidden
    }

    .globe .g {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      align-items: center;
      min-height: 90vh
    }

    .globe canvas {
      width: 100%;
      height: 78vh
    }

    .gs {
      display: grid;
      gap: 28px;
      margin-top: 40px
    }

    .gs div {
      border-left: 1px solid #ffffff22;
      padding-left: 22px
    }

    .num {
      font-size: clamp(46px, 6.5vw, 86px);
      letter-spacing: -.05em;
      line-height: 1;
      font-weight: 200
    }

    .num i {
      font-style: normal;
      font-size: .35em;
      color: var(--blue)
    }

    .light .num {
      color: var(--navy)
    }

    .tl {
      position: relative;
      margin-top: 70px;
      padding-left: 60px
    }

    .tl .ln {
      position: absolute;
      left: 14px;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #0a1a3a1f
    }

    .tl .ln i {
      display: block;
      height: 100%;
      background: linear-gradient(var(--blue), var(--cyan));
      transform-origin: top;
      transform: scaleY(0)
    }

    .st {
      padding: 0 0 70px;
      opacity: .25;
      transition: opacity .6s, transform .6s;
      transform: translateX(18px);
      position: relative
    }

    .st.on {
      opacity: 1;
      transform: none
    }

    .st:before {
      content: "";
      position: absolute;
      left: -52px;
      top: 10px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--paper);
      border: 2px solid var(--blue);
      transition: background .4s, box-shadow .4s
    }

    .st.on:before {
      background: var(--cyan);
      box-shadow: 0 0 0 7px #4de3f033
    }

    .st b {
      font-weight: 200;
      font-size: 54px;
      color: var(--blue);
      letter-spacing: -.04em
    }

    .st h4 {
      font-weight: 600;
      font-size: 22px
    }

    .st p {
      color: #55688d;
      max-width: 480px
    }

    .mesh {
      position: absolute;
      inset: 0;
      background: radial-gradient(55% 60% at 18% 22%, var(--a, #4a7dff), transparent 70%), radial-gradient(50% 55% at 82% 72%, var(--b, #4de3f0), transparent 70%), #06142e;
      overflow: hidden
    }

    .mesh:after {
      content: "";
      position: absolute;
      inset: 0;
      mix-blend-mode: overlay;
      opacity: .5;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")
    }

    .mesh:before {
      content: "";
      position: absolute;
      inset: -30%;
      background: conic-gradient(from 0deg, #ffffff00, #ffffff1f, #ffffff00 40%);
      animation: sp 18s linear infinite
    }

    @keyframes sp {
      to {
        transform: rotate(360deg)
      }
    }

    .story {
      position: relative;
      min-height: 110vh;
      overflow: hidden;
      display: flex;
      align-items: center
    }

    .story .mesh {
      inset: -10% 0
    }

    .story .wrap {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 50px;
      align-items: center
    }

    .glass {
      padding: 38px;
      background: #ffffff14;
      border: 1px solid #ffffff2e;
      backdrop-filter: blur(18px);
      transition: transform .15s ease-out
    }

    .glass .num {
      font-size: 70px
    }

    .spot {
      position: relative;
      overflow: hidden
    }

    .spot>* {
      position: relative
    }

    .spot:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), #4de3f030, transparent 60%);
      opacity: 0;
      transition: opacity .3s
    }

    .spot:hover:before {
      opacity: 1
    }

    .bento {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
      margin-top: 60px
    }

    .bento .spot {
      padding: 34px;
      grid-column: span 2;
      min-height: 230px;
      background: #fff;
      box-shadow: 0 1px 0 #0a1a3a14;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }

    .bento .w {
      grid-column: span 3
    }

    .bento h4 {
      font-weight: 600;
      font-size: 20px
    }

    .bento p {
      font-size: 14px;
      color: #55688d
    }

    .bento .dk {
      background: var(--navy);
      color: #fff
    }

    .bento .dk p {
      color: #9fb0d0
    }

    .bento .bn {
      font-size: 64px;
      font-weight: 300;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--blue)
    }

    .bento .dk .bn {
      color: var(--cyan)
    }

    .dark2 {
      background: #07122b
    }

    .sg {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 60px;
      perspective: 1000px
    }

    .sg .spot {
      padding: 30px;
      border: 1px solid #ffffff1a;
      background: #ffffff08;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform .15s ease-out;
      transform-style: preserve-3d
    }

    .sg b {
      font-size: 32px;
      font-weight: 200;
      letter-spacing: -.03em
    }

    .ins {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 60px;
      perspective: 1000px
    }

    .ins a {
      position: relative;
      overflow: hidden;
      height: 380px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 26px;
      letter-spacing: -.02em;
      line-height: 1.15;
      transition: transform .15s ease-out;
      transform-style: preserve-3d;
      color: #fff
    }

    .ins a>* {
      position: relative
    }

    .ins small {
      font-size: 12px;
      opacity: .8
    }

    .ins .mesh {
      transition: transform .8s
    }

    .ins a:hover .mesh {
      transform: scale(1.15)
    }

    .qs {
      overflow: hidden;
      padding: 20px 0
    }

    .qs .track {
      gap: 20px;
      animation-duration: 50s
    }

    .q {
      width: 380px;
      flex: none;
      padding: 32px;
      border: 1px solid #ffffff1a;
      background: #ffffff08;
      color: #d5def2;
      font-size: 16px;
      letter-spacing: 0;
      white-space: normal
    }

    .q small {
      display: block;
      margin-top: 18px;
      color: var(--mut);
      font-size: 12px
    }

    .faq button {
      width: 100%;
      text-align: left;
      padding: 26px 0;
      border-bottom: 1px solid #0a1a3a22;
      display: flex;
      justify-content: space-between;
      font-size: 20px
    }

    .faq .a {
      overflow: hidden;
      transition: max-height .45s ease, padding .45s;
      color: #55688d;
      font-size: 15px;
      max-width: 640px
    }

    .cta {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: radial-gradient(ellipse at 70% 50%, #0f2c66, var(--ink) 65%)
    }

    .cta canvas {
      position: absolute;
      right: -5%;
      top: 0;
      width: 62%;
      height: 100%
    }

    .cta .wrap {
      position: relative;
      z-index: 2
    }

    footer {
      background: #030813;
      padding: 80px 0 20px;
      font-size: 13px;
      color: var(--mut);
      overflow: hidden
    }

    footer .wrap {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 30px
    }

    footer a {
      display: block;
      margin-top: 12px
    }

    footer b {
      color: #fff;
      font-weight: 600
    }

    .big {
      font-size: clamp(70px, 20vw, 280px);
      font-weight: 600;
      letter-spacing: .04em;
      text-align: center;
      line-height: 1;
      margin-top: 60px;
      color: transparent;
      -webkit-text-stroke: 1px #4a7dff55;
      user-select: none
    }

    .rv {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1)
    }

    .rv.in {
      opacity: 1;
      transform: none
    }

    @media(max-width:860px) {
      nav ul {
        display: none
      }

      .grid2,
      .globe .g,
      .story .wrap,
      footer .wrap {
        grid-template-columns: 1fr
      }

      .hero canvas,
      .cta canvas {
        width: 100%;
        right: 0;
        opacity: .5
      }

      .stk .in {
        grid-template-columns: 1fr;
        align-items: end;
        padding-bottom: 70px
      }

      .stk canvas {
        width: 100%;
        right: 0;
        opacity: .8
      }

      .sec {
        padding: 90px 0
      }

      .bento .spot,
      .bento .w {
        grid-column: span 6
      }

      .sg,
      .ins {
        grid-template-columns: 1fr 1fr
      }

      .ins {
        grid-template-columns: 1fr
      }

      .hd {
        padding-top: 80px
      }

      .q {
        width: 290px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      * {
        transition: none !important;
        animation: none !important
      }

      .rv {
        opacity: 1;
        transform: none
      }
    }

    .halo {
      position: fixed;
      left: 0;
      top: 0;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, #4de3f01c, transparent 65%);
      pointer-events: none;
      z-index: 40;
      mix-blend-mode: screen
    }

    @media(hover:none) {
      .halo {
        display: none
      }
    }

    .track>* {
      transform: skewX(var(--sk, 0deg))
    }

    .ins .im {
      position: absolute;
      inset: 0
    }

    .ins .im img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .8s
    }

    .ins a:hover .im img {
      transform: scale(1.12)
    }

    .ins .im:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, #050d1f33, #050d1fd0)
    }

    .shot {
      perspective: 1400px;
      margin-top: 70px
    }

    .frame {
      transform-origin: 50% 0;
      background: #0b1a3b;
      border: 1px solid #ffffff22;
      box-shadow: 0 60px 120px #000a, 0 0 0 1px #4de3f01a;
      overflow: hidden;
      will-change: transform
    }

    .bar3 {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 14px 18px;
      background: #08142e;
      font-size: 12px;
      color: var(--mut)
    }

    .bar3 i {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ffffff2a
    }

    .bar3 span {
      margin-left: 14px
    }

    .dash {
      display: grid;
      grid-template-columns: 180px 1fr;
      min-height: 440px
    }

    .dash aside {
      padding: 24px 18px;
      border-right: 1px solid #ffffff12;
      display: grid;
      gap: 6px;
      align-content: start;
      font-size: 13px
    }

    .dash aside b {
      font-weight: 300;
      padding: 10px 14px;
      color: var(--mut)
    }

    .dash aside b.on {
      background: #4de3f01a;
      color: #fff;
      box-shadow: inset 2px 0 var(--cyan)
    }

    .dash main {
      padding: 24px;
      display: grid;
      gap: 18px
    }

    .kp {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px
    }

    .kp div {
      padding: 16px;
      background: #ffffff0a
    }

    .kp small {
      color: var(--mut);
      display: block;
      font-size: 11px
    }

    .kp strong {
      font-size: 28px;
      font-weight: 200
    }

    .ch svg {
      width: 100%;
      height: 170px;
      display: block;
      background: #ffffff06
    }

    .ln2 {
      stroke-dasharray: 1;
      stroke-dashoffset: 1
    }

    .live .ln2 {
      animation: dw 2.6s .3s forwards
    }

    @keyframes dw {
      to {
        stroke-dashoffset: 0
      }
    }

    .ar {
      opacity: 0
    }

    .live .ar {
      animation: fi 2s 1.2s forwards
    }

    @keyframes fi {
      to {
        opacity: 1
      }
    }

    .tb div {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      padding: 11px 14px;
      font-size: 12px;
      border-bottom: 1px solid #ffffff10;
      opacity: 0
    }

    .live .tb div {
      animation: rowin .6s both
    }

    .tb em {
      font-style: normal;
      color: var(--cyan)
    }

    @keyframes rowin {
      from {
        opacity: 0;
        transform: translateX(-24px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .cmp {
      position: relative;
      height: 470px;
      margin-top: 60px;
      overflow: hidden;
      user-select: none;
      touch-action: pan-y;
      cursor: ew-resize;
      box-shadow: 0 30px 80px #0a1a3a26
    }

    .cmp .L {
      position: absolute;
      inset: 0;
      padding: 40px
    }

    .cmp h3 {
      font-weight: 200;
      font-size: clamp(30px, 4vw, 52px);
      letter-spacing: -.03em
    }

    .cmp .af {
      background: linear-gradient(135deg, #0a1a3a, #12327a);
      color: #fff;
      text-align: right
    }

    .cmp .bf {
      background: #d6dae3;
      color: #3b4252
    }

    .cmp .ch2 {
      position: absolute;
      padding: 8px 14px;
      background: #fff;
      border: 1px dashed #8a93a6;
      font-size: 13px
    }

    .cmp .ms {
      position: absolute;
      bottom: 40px;
      display: flex;
      gap: 40px;
      flex-wrap: wrap
    }

    .cmp .ms b {
      display: block;
      font-size: 44px;
      font-weight: 200;
      letter-spacing: -.03em;
      line-height: 1.1
    }

    .cmp .af .ms {
      right: 40px
    }

    .hdl {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--cyan);
      margin-left: -1px
    }

    .hdl:after {
      content: "↔";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 46px;
      height: 46px;
      margin: -23px;
      border-radius: 50%;
      background: var(--cyan);
      color: var(--ink);
      display: grid;
      place-items: center;
      box-shadow: 0 0 0 8px #4de3f044
    }

    .orb {
      position: relative;
      width: 520px;
      height: 520px;
      margin: auto
    }

    .orb .rg {
      position: absolute;
      border-radius: 50%;
      border: 1px solid #4a7dff44;
      animation: sp var(--d) linear infinite
    }

    .slot {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      transform: rotate(var(--a)) translateX(var(--r))
    }

    .un {
      width: 0;
      height: 0;
      display: grid;
      place-items: center;
      transform: rotate(calc(var(--a) * -1))
    }

    .cp {
      white-space: nowrap;
      padding: 8px 16px;
      background: #0d2557;
      border: 1px solid #4de3f044;
      font-size: 12px;
      animation: spr var(--d) linear infinite
    }

    @keyframes spr {
      to {
        transform: rotate(-360deg)
      }
    }

    .core {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 130px;
      height: 130px;
      margin: -65px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: radial-gradient(circle at 35% 30%, #2d5fd0, #0a1a3a);
      font-size: 12px;
      letter-spacing: .15em;
      box-shadow: 0 0 0 1px #4de3f044, 0 0 80px #4a7dff66
    }

    .core:before,
    .core:after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid var(--cyan);
      animation: pl 3s ease-out infinite
    }

    .core:after {
      animation-delay: 1.5s
    }

    @keyframes pl {
      to {
        transform: scale(2.8);
        opacity: 0
      }
    }

    .cs {
      display: grid;
      grid-template-columns: .8fr 1.4fr;
      gap: 40px;
      margin-top: 60px
    }

    .cs button {
      display: block;
      width: 100%;
      text-align: left;
      padding: 26px 0;
      border-bottom: 1px solid #ffffff1a;
      position: relative;
      font-size: 22px;
      color: #6b7c9f;
      transition: color .3s
    }

    .cs button.on {
      color: #fff
    }

    .cs button i {
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 2px;
      width: 100%;
      background: var(--cyan);
      transform-origin: 0;
      animation: fl 6s linear forwards
    }

    @keyframes fl {
      from {
        transform: scaleX(0)
      }
    }

    .cv {
      position: relative;
      min-height: 480px;
      overflow: hidden
    }

    .cv img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: scale(1.15);
      transition: opacity .9s, transform 6s linear
    }

    .cv img.on {
      opacity: 1;
      transform: scale(1)
    }

    .cv .cap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 34px;
      background: linear-gradient(transparent, #050d1fe6);
      font-size: 18px;
      max-width: 100%
    }

    .bt {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 48px;
      background: linear-gradient(transparent 30%, #050d1fcc)
    }

    .bt p {
      color: #c5d2ea;
      margin-top: 14px
    }

    footer .nw {
      grid-template-columns: 1fr 1fr;
      align-items: center;
      margin-bottom: 70px;
      color: #fff
    }

    .nw h3 {
      font-weight: 200;
      font-size: 36px;
      letter-spacing: -.03em
    }

    .nw p {
      color: var(--mut)
    }

    .nf {
      display: flex;
      gap: 10px
    }

    .nf input {
      flex: 1;
      min-width: 0;
      background: #ffffff0d;
      border: 1px solid #ffffff2a;
      color: #fff;
      padding: 14px 18px;
      font: inherit;
      font-size: 14px
    }

    .nw .ok {
      color: var(--cyan)
    }

    @media(max-width:860px) {
      .dash {
        grid-template-columns: 1fr
      }

      .dash aside {
        display: none
      }

      .kp {
        grid-template-columns: 1fr
      }

      .cs {
        grid-template-columns: 1fr
      }

      .orb {
        transform: scale(.62);
        margin: -100px auto
      }

      .cmp .ms b {
        font-size: 30px
      }

      .cmp .ms {
        gap: 22px
      }

      footer .nw {
        grid-template-columns: 1fr
      }
    }

    @media(prefers-reduced-motion:no-preference) {
      html {
        scroll-behavior: smooth
      }
    }

    .ld {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: var(--ink);
      display: grid;
      place-items: center;
      transition: transform 1.1s cubic-bezier(.76, 0, .24, 1), visibility 0s 1.1s
    }

    .ld.off {
      transform: translateY(-100%);
      visibility: hidden;
      pointer-events: none
    }

    .ldl {
      width: min(320px, 70vw);
      text-align: center
    }

    .ldn {
      font-size: 64px;
      font-weight: 200;
      letter-spacing: -.04em;
      margin: 18px 0 14px;
      font-variant-numeric: tabular-nums
    }

    .ldb {
      height: 2px;
      background: #ffffff1f
    }

    .ldb i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--blue), var(--cyan));
      transform-origin: 0
    }

    .bg {
      display: none;
      position: relative;
      width: 44px;
      height: 44px
    }

    .bg span {
      position: absolute;
      left: 11px;
      width: 22px;
      height: 2px;
      background: #fff;
      transition: .35s
    }

    .bg span:first-child {
      top: 18px
    }

    .bg span:last-child {
      top: 26px
    }

    .bg.x span:first-child {
      top: 22px;
      transform: rotate(45deg)
    }

    .bg.x span:last-child {
      top: 22px;
      transform: rotate(-45deg)
    }

    .mn {
      position: fixed;
      inset: 0;
      background: #050d1ff5;
      backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 32px;
      gap: 8px;
      transform: translateY(-100%);
      transition: transform .6s cubic-bezier(.76, 0, .24, 1);
      z-index: 49
    }

    .mn.open {
      transform: none
    }

    .mn a {
      font-size: 38px;
      font-weight: 200;
      letter-spacing: -.03em
    }

    .sn {
      position: fixed;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 45;
      display: grid;
      gap: 16px;
      mix-blend-mode: difference
    }

    .sn a {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid #fff;
      position: relative;
      transition: .3s
    }

    .sn a.on {
      background: #fff;
      transform: scale(1.4)
    }

    .sn a span {
      position: absolute;
      right: 22px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 11px;
      white-space: nowrap;
      opacity: 0;
      transition: .3s;
      color: #fff
    }

    .sn a:hover span {
      opacity: 1
    }

    .fl {
      position: absolute;
      z-index: 3;
      padding: 12px 18px;
      background: #ffffff12;
      border: 1px solid #ffffff2e;
      backdrop-filter: blur(14px);
      font-size: 12px;
      box-shadow: 0 20px 50px #0006
    }

    .fl b {
      color: var(--cyan);
      font-weight: 600
    }

    .fl i {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #52f0a0;
      margin-right: 8px;
      box-shadow: 0 0 10px #52f0a0
    }

    .dev {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 60px;
      align-items: center
    }

    .dev ul {
      list-style: none;
      padding: 0;
      margin: 30px 0 36px;
      display: grid;
      gap: 12px;
      color: #b9c6e0
    }

    .dev li:before {
      content: "✓";
      color: var(--cyan);
      margin-right: 12px
    }

    .term {
      background: #030a18;
      border: 1px solid #ffffff1f;
      box-shadow: 0 40px 100px #000a, 0 0 0 1px #4de3f01a;
      font-family: ui-monospace, Menlo, Consolas, monospace;
      font-size: 13px
    }

    .term pre {
      padding: 26px;
      margin: 0;
      min-height: 390px;
      white-space: pre-wrap;
      line-height: 1.7;
      color: #cfe0ff;
      font-family: inherit;
      overflow: hidden
    }

    .term .rq {
      color: var(--cyan)
    }

    .term .rs {
      color: #7be8a8;
      margin-top: 6px
    }

    .cr {
      display: inline-block;
      width: 8px;
      height: 15px;
      background: var(--cyan);
      vertical-align: middle;
      margin-left: 2px;
      animation: bl 1s steps(1) infinite
    }

    @keyframes bl {
      50% {
        opacity: 0
      }
    }

    .pl {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 60px;
      perspective: 1000px
    }

    .pl>div {
      height: 100%
    }

    .pl .spot {
      height: 100%;
      padding: 0;
      border: 1px solid #ffffff1a;
      background: #ffffff08;
      transition: transform .15s ease-out;
      transform-style: preserve-3d
    }

    .pl .pin2 {
      padding: 40px 32px;
      min-height: 460px;
      display: flex;
      flex-direction: column;
      z-index: 1
    }

    .pl .pin2 h3 {
      font-weight: 200;
      font-size: 34px;
      letter-spacing: -.03em
    }

    .pl .pin2 p {
      color: var(--mut);
      margin: 8px 0 26px;
      font-size: 14px
    }

    .pl ul {
      list-style: none;
      padding: 0;
      display: grid;
      gap: 12px;
      font-size: 14px;
      color: #c5d2ea;
      margin-bottom: 34px
    }

    .pl li:before {
      content: "✓";
      color: var(--cyan);
      margin-right: 12px
    }

    .pl .pin2 a {
      margin-top: auto;
      align-self: flex-start
    }

    .pl .ft {
      border-color: transparent;
      padding: 2px
    }

    .pl .ft .pin2 {
      background: #0b2150
    }

    .pl .ft:after {
      content: "";
      position: absolute;
      inset: -60%;
      background: conic-gradient(from 0deg, transparent 65%, var(--cyan));
      animation: sp 6s linear infinite;
      z-index: 0
    }

    .pl .tg {
      font-size: 11px;
      color: var(--ink);
      background: var(--cyan);
      padding: 3px 10px;
      align-self: flex-start;
      margin-bottom: 16px;
      font-weight: 600
    }

    @media(max-width:860px) {
      .bg {
        display: block
      }

      .dev,
      .pl {
        grid-template-columns: 1fr
      }

      .fl {
        display: none
      }
    }

    @media(max-width:560px) {
      nav .btn {
        display: none
      }
    }

    .mf {
      background: linear-gradient(#050d1f, #07122b)
    }

    .mfg {
      display: grid;
      grid-template-columns: 1.25fr 1fr;
      gap: 56px;
      align-items: end;
      margin-top: 8px
    }

    .mfh {
      font-size: clamp(32px, 4.6vw, 62px);
      line-height: 1.08;
      font-weight: 300;
      letter-spacing: -.025em;
      color: #fff
    }

    .mfh em {
      font-style: normal;
      color: var(--cyan)
    }

    .mfp {
      font-size: clamp(17px, 1.5vw, 21px);
      line-height: 1.65;
      color: #c3cfe8;
      padding-left: 28px;
      border-left: 2px solid var(--cyan)
    }

    .mfp b {
      color: #fff;
      font-weight: 500
    }

    .mfc {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 64px
    }

    .mfk {
      height: 100%;
      padding: 30px;
      border: 1px solid #ffffff1f;
      background: #ffffff0a;
      border-top: 2px solid var(--blue)
    }

    .mfk small {
      color: var(--cyan);
      letter-spacing: .14em;
      font-size: 12px
    }

    .mfk h3 {
      font-weight: 400;
      font-size: 22px;
      margin: 12px 0 8px;
      color: #fff
    }

    .mfk p {
      color: #9fb0d0;
      font-size: 15px;
      line-height: 1.55;
      margin: 0
    }

    @media(max-width:860px) {
      .mfg {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .mfc {
        grid-template-columns: 1fr
      }

      .mfp {
        padding-left: 20px
      }
    }

    /* =====================================================================
   LIGHT THEME OVERRIDES  (added on top of the original stylesheet)
   Palette: page #f7faff · alt #e8f0fc · cards #fff · text navy #0a1a3a
   Accents: blue #3b6cf2 · cyan #4de3f0 · CMYK stripe unchanged
   ===================================================================== */
    :root {
      --ink: #f7faff;
      --paper: #e8f0fc;
      --mut: #4f6288;
      --blue: #3b6cf2;
      --teal: #0a86a3;
      --ln: #0a1a3a1f
    }

    body {
      background: var(--ink);
      color: var(--navy)
    }

    :focus-visible {
      outline-color: var(--blue)
    }

    ::selection {
      background: #4de3f066;
      color: var(--navy)
    }

    /* buttons */
    .btn {
      color: #04122e
    }

    .btn:hover {
      box-shadow: 0 10px 36px #4de3f08c
    }

    .ghost,
    .light .ghost {
      background: none;
      color: var(--navy);
      border: 1px solid #0a1a3a40
    }

    .ghost:hover {
      background: #0a1a3a0d
    }

    /* nav + menu + loader + misc chrome */
    nav.s {
      background: #f7faffeb;
      box-shadow: 0 1px 0 #0a1a3a14
    }

    nav ul a {
      opacity: .72
    }

    .bg span {
      background: var(--navy)
    }

    .mn {
      background: #f7fafff7
    }

    #bar {
      background: linear-gradient(90deg, #00b7eb 25%, #ec008c 25% 50%, #f2b800 50% 75%, #0a1a3a 75%)
    }

    .ldb {
      background: #0a1a3a18
    }

    .halo {
      background: radial-gradient(circle, #3b6cf212, transparent 65%);
      mix-blend-mode: multiply
    }

    /* labels */
    .lab,
    .light .lab {
      color: #2f5be0;
      font-weight: 400
    }

    /* hero */
    .hero {
      background: radial-gradient(ellipse at 72% 38%, #d6e4ff 0, var(--ink) 64%)
    }

    .hero p {
      color: #41567f
    }

    .hm {
      border: 1px solid #0a1a3a14;
      background: radial-gradient(circle at 50% 45%, #4a7dff24, transparent 70%)
    }

    .marq {
      border-block: 1px solid var(--ln)
    }

    .track {
      color: #7385a8
    }

    .track span:nth-child(4n+1) {
      color: #0096c7
    }

    .track span:nth-child(4n+2) {
      color: #d4007a
    }

    .track span:nth-child(4n+3) {
      color: #d49400
    }

    /* section backgrounds */
    .light {
      background-color: var(--paper);
      color: var(--navy);
      background-image: radial-gradient(#0a1a3a1f 1.2px, transparent 1.6px);
      background-size: 16px 16px
    }

    .dark2 {
      background: #fff
    }

    .mf {
      background: linear-gradient(var(--ink), #eef4fd)
    }

    .stk {
      background: radial-gradient(ellipse at 75% 50%, #d6e4ff, var(--ink) 70%)
    }

    .globe {
      background: var(--ink)
    }

    .cta {
      background: radial-gradient(ellipse at 70% 50%, #d6e4ff, var(--ink) 65%)
    }

    /* manifesto */
    .mfh,
    .mfp b,
    .mfk h3 {
      color: var(--navy)
    }

    .mfh em {
      color: var(--blue)
    }

    .mfp {
      color: #41567f;
      border-left-color: var(--blue)
    }

    .mfk {
      background: #fff;
      border: 1px solid var(--ln);
      border-top: 2px solid var(--blue);
      box-shadow: 0 12px 34px #0a1a3a0f
    }

    .mfk small {
      color: var(--blue)
    }

    .mfk p {
      color: #55688d
    }

    /* platform / process */
    .pan p {
      color: #41567f
    }

    .rail i {
      background: #0a1a3a22
    }

    .rail i.on {
      background: var(--blue)
    }

    /* product cards */
    .pc {
      background: #fff;
      border: 1px solid var(--ln);
      box-shadow: 0 14px 40px #0a1a3a12
    }

    .pc .art {
      background: radial-gradient(circle at 50% 40%, #4a7dff26, transparent 70%)
    }

    .pbar {
      background: #0a1a3a18
    }

    .pbar i {
      background: var(--blue)
    }

    /* stats */
    .gs div,
    .stats>div {
      border-left: 1px solid #0a1a3a26
    }

    /* control-panel mock-up stays a dark "screen" on the light page */
    .frame {
      box-shadow: 0 50px 100px #0a1a3a38, 0 0 0 1px #0a1a3a22
    }

    /* control-panel: keep text readable on the dark screen */
    .frame{color:#eaf2ff;--mut:#a9b9d9;--cyan:#4de3f0}
    .frame .bar3{color:#a9b9d9}
    .frame .dash aside b{color:#a9b9d9}
    .frame .dash aside b.on{color:#fff}
    .frame .kp div{background:#ffffff12;border:1px solid #ffffff14}
    .frame .kp small{color:#a9b9d9;font-size:12px;margin-bottom:4px}
    .frame .kp strong{color:#fff;font-size:28px;font-weight:300}
    .ch{background:#ffffff08;border:1px solid #ffffff14;padding:14px 16px 10px}
    .ch .ct{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#d5e1f7;margin-bottom:8px}
    .ch .ct em{font-style:normal;color:#4de3f0;font-size:12px}
    .ch svg{height:auto;aspect-ratio:600/210;background:none}
    .ch svg text{font-family:inherit;font-size:11px;fill:#a9b9d9}
    .ch svg .gl{stroke:#ffffff1f;stroke-width:1}
    .ar{opacity:1}.live .ar{animation:none}
    .ln2{stroke-dasharray:none;stroke-dashoffset:0}.live .ln2{animation:dw2 2.2s ease-out both}
    @keyframes dw2{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
    .tb{border:1px solid #ffffff14}
    .tb .th{background:#ffffff10;color:#a9b9d9;font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:1;animation:none!important}
    .tb div{opacity:1;color:#fff;font-size:13px}
    .live .tb div:not(.th){animation:rowin2 .6s both}
    @keyframes rowin2{from{opacity:.0;transform:translateX(-16px)}to{opacity:1;transform:none}}
    .tb em.st-p{color:#4de3f0}.tb em.st-q{color:#ffd166}.tb em.st-d{color:#6ee7a0}.ch svg{overflow:visible}
    .tb span:last-child{text-align:right}

    .term {
      box-shadow: 0 40px 90px #0a1a3a38, 0 0 0 1px #0a1a3a22
    }

    .fl {
      background: #ffffffe0;
      border: 1px solid #0a1a3a1a;
      box-shadow: 0 14px 34px #0a1a3a1f;
      color: var(--navy)
    }

    .fl b {
      color: var(--blue)
    }

    /* ecosystem orbit */
    .cp {
      background: #fff;
      border: 1px solid #3b6cf255;
      color: var(--navy);
      box-shadow: 0 6px 18px #0a1a3a14
    }

    .orb .rg {
      border-color: #3b6cf233
    }

    .core {
      color: #fff
    }

    /* developer / service */
    .dev ul {
      color: #41567f
    }

    .dev li:before,
    .pl li:before {
      color: var(--teal)
    }

    /* compare slider */
    .hdl:after {
      color: #04122e
    }

    /* use-cases */
    .cs button {
      border-bottom: 1px solid var(--ln);
      color: #7385a8
    }

    .cs button.on {
      color: var(--navy)
    }

    .cs button i {
      background: var(--blue)
    }

    .cv .cap {
      background: linear-gradient(transparent, #f7faffee);
      color: var(--navy)
    }

    /* band */
    .bt {
      background: linear-gradient(transparent 8%, #f7faffd9 52%, #f7faff 100%)
    }

    .bt p {
      color: #41567f
    }

    /* client story */
    .glass {
      background: #ffffffb8;
      border: 1px solid #ffffffcc;
      box-shadow: 0 24px 60px #0a1a3a1f;
      color: var(--navy)
    }

    /* trust + testimonials + plans */
    .sg .spot,
    .q {
      background: #fff;
      border: 1px solid var(--ln);
      box-shadow: 0 10px 30px #0a1a3a0d
    }

    .q {
      color: #2b3f66
    }

    .pl .spot {
      background: #fff;
      border: 1px solid var(--ln);
      box-shadow: 0 14px 40px #0a1a3a10
    }

    .pl p {
      color: #55688d
    }

    .pl ul {
      color: #3b4f78
    }

    .pl .ft {
      border-color: transparent
    }

    .pl .ft .pin2 {
      background: #0b2150;
      color: #fff
    }

    .pl .ft .pin2 h3 {
      color: #fff
    }

    .pl .ft .pin2 p {
      color: #9fb0d0
    }

    .pl .ft .pin2 ul {
      color: #c5d2ea
    }

    .pl .ft .ghost {
      color: #fff;
      border-color: #ffffff3a
    }

    .pl .tg {
      color: #04122e
    }

    /* insights cards (image + caption) */
    .ins a {
      color: var(--navy)
    }

    .ins .im:after {
      background: linear-gradient(180deg, #f7faff26, #f7faffe6)
    }

    /* footer */
    footer {
      background: #e8f0fc;
      color: var(--mut)
    }

    footer b,
    footer .nw {
      color: var(--navy)
    }

    .nw p {
      color: var(--mut)
    }

    .nf input {
      background: #fff;
      border: 1px solid #0a1a3a2a;
      color: var(--navy)
    }

    .nw .ok {
      color: var(--teal)
    }

    .big {
      -webkit-text-stroke: 1px #3b6cf255
    }

    /* v5 contrast fixes */
    :root {
      --mut: #44587f;
      --ln: #0a1a3a2e
    }

    body {
      font-weight: 400
    }

    h1,
    h2 {
      font-weight: 300;
      color: #06122b
    }

    .pan h3,
    .pc h3,
    .nw h3 {
      font-weight: 400
    }

    .num,
    .st b,
    .bento .bn,
    .sg b {
      font-weight: 300
    }

    .hero p,
    .pan p,
    .dev ul,
    .pl ul {
      color: #2f4468
    }

    .st p,
    .bento p,
    .faq .a,
    .mfk p,
    .pl p {
      color: #3a4e75
    }

    .q {
      color: #1f3358
    }

    .st {
      opacity: .4
    }

    .st.on {
      opacity: 1
    }

    .track {
      color: #4a5d84
    }

    .track span:nth-child(4n+1) {
      color: #007a9e
    }

    .track span:nth-child(4n+2) {
      color: #c4006c
    }

    .track span:nth-child(4n+3) {
      color: #a56d00
    }

    .cs button {
      color: #51648b
    }

    .cs button.on {
      color: #06122b
    }

    .orb .rg {
      border-color: #3b6cf266
    }

    .hm {
      border: 1px solid #0a1a3a26;
      background: radial-gradient(circle at 50% 45%, #4a7dff33, transparent 70%)
    }

    .hm svg {
      filter: drop-shadow(0 24px 36px #0a1a3a47)
    }

    .btn {
      background: #0a1a3a;
      color: #fff
    }

    .btn:hover {
      background: #3b6cf2;
      box-shadow: 0 10px 30px #3b6cf255
    }

    .btn.ghost,
    .light .btn.ghost {
      background: transparent;
      color: #0a1a3a;
      border: 1px solid #0a1a3a66
    }

    .btn.ghost:hover {
      background: #0a1a3a12;
      box-shadow: none
    }

    .ins a {
      color: #fff
    }

    .ins .im:after {
      background: linear-gradient(180deg, #050d1f40, #050d1fe0)
    }

    .stk {
      background: radial-gradient(ellipse at 75% 50%, #16409a, #071431 72%)
    }

    .globe {
      background: radial-gradient(ellipse at 70% 50%, #13348a, #071431 70%)
    }

    .cta:has(canvas) {
      background: radial-gradient(ellipse at 70% 50%, #16409a, #071431 68%)
    }

    .stk,
    .globe,
    .cta:has(canvas) {
      --mut: #b3c2e0;
      color: #fff
    }

    .stk h2,
    .globe h2,
    .cta:has(canvas) h1 {
      color: #fff
    }

    .stk .lab,
    .globe .lab,
    .cta:has(canvas) .lab {
      color: #7be8ff
    }

    .stk .pan p {
      color: #c3d0ea
    }

    .stk .rail i {
      background: #ffffff40
    }

    .stk .rail i.on {
      background: #4de3f0
    }

    .globe .num {
      color: #fff
    }

    .globe .num i {
      color: #4de3f0
    }

    .globe .gs div {
      border-left-color: #ffffff40
    }

    .stk .btn,
    .globe .btn,
    .cta:has(canvas) .btn,
    .pl .ft .btn {
      background: #4de3f0;
      color: #04122e
    }

    .cta:has(canvas) .btn.ghost,
    .pl .ft .btn.ghost {
      background: transparent;
      color: #fff;
      border-color: #ffffff66
    }

    footer {
      background: #06122b;
      color: #a9b8d6;
      border-width: 4px 0 0;
      border-style: solid;
      border-image: linear-gradient(90deg, #00b7eb 25%, #ec008c 25% 50%, #f2b800 50% 75%, #fff 75%) 1
    }

    footer b,
    footer .nw,
    footer .nw h3,
    footer .logo {
      color: #fff !important
    }

    footer p,
    .nw p {
      color: #a9b8d6
    }

    footer a {
      color: #a9b8d6;
      transition: color .2s
    }

    footer a:hover {
      color: #4de3f0
    }

    footer .nw .ok {
      color: #7be8a8
    }

    footer .nf input {
      background: #0d1f45;
      border: 1px solid #ffffff40;
      color: #fff
    }

    footer .nf input::placeholder {
      color: #8ea0c4
    }

    footer .btn {
      background: #4de3f0;
      color: #04122e
    }

    footer .btn:hover {
      background: #fff
    }

    footer .big {
      -webkit-text-stroke: 1px #4de3f099
    }
  

.pc{height:auto!important;align-self:stretch}
.pc .art{flex:0 0 clamp(140px,27vh,250px)!important;background:#fff!important;overflow:hidden;border-bottom:1px solid #0a1a3a14}
.pc div.t{flex:none;padding:18px 24px 22px!important}
.pc h3{font-size:22px!important}
.pc p{margin:6px 0 12px!important;font-size:13.5px!important;line-height:1.5}
@media(max-height:640px){#machines .hd h2{font-size:clamp(24px,3.2vw,38px)!important}#machines .hd .lab{margin-bottom:10px}.pc .art{flex-basis:clamp(120px,24vh,190px)!important}}

.hero{position:relative}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(ellipse at 72% 38%,#d6e4ff 0,#f7faff 64%)}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.04);transition:opacity 1.4s ease,transform 8s ease-out}
.hero-bg video.on{opacity:1;transform:scale(1)}
.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,250,255,.93) 0%,rgba(247,250,255,.72) 40%,rgba(247,250,255,.18) 100%),linear-gradient(180deg,rgba(247,250,255,.55) 0%,rgba(247,250,255,0) 22%,rgba(247,250,255,0) 78%,#f7faff 100%)}
.hero>.wrap{position:relative;z-index:1}
.hero h1,.hero .lab{text-shadow:0 1px 18px rgba(247,250,255,.9)}
.hero .hm{background:rgba(255,255,255,.55)!important;backdrop-filter:blur(10px);box-shadow:0 30px 70px rgba(10,26,58,.18);border:1px solid rgba(255,255,255,.8)!important}
@media(max-width:860px){.hero-bg:after{background:linear-gradient(180deg,rgba(247,250,255,.9),rgba(247,250,255,.7) 60%,#f7faff)}}
@media(prefers-reduced-motion:reduce){.hero-bg video{display:none}}

#insights .ins .im{background:#fff}
#insights .ins .im img{height:64%;object-fit:contain!important;padding:18px 18px 0;box-sizing:border-box}
#insights .ins a:hover .im img{transform:scale(1.05)}
#insights .ins .im:after{background:linear-gradient(180deg,rgba(255,255,255,0) 35%,rgba(10,26,58,.92) 78%)}

/* Use cases: Gravity product shots (contain on white, not cropped) */
.cv{background:#fff;border:1px solid var(--ln)}
.cv img{object-fit:contain!important;padding:56px 40px 170px;box-sizing:border-box;background:#fff}
.cv .pn{position:absolute;left:18px;top:18px;z-index:2;font-size:12px;padding:6px 12px;background:#0a1a3a;color:#fff;letter-spacing:.02em}
.cv .cap{z-index:2;background:linear-gradient(transparent,#fff 38%)!important;color:var(--navy)}
.cv .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.cv .chips span{font-size:12px;padding:6px 12px;border:1px solid #0a1a3a33;background:#fff;color:var(--navy)}
@media(max-width:860px){.cv{min-height:420px}.cv img{padding:52px 24px 190px}}

/* nav dropdown submenus (from gravityprintech.com) */
nav li.hd{position:relative;padding:22px 0;margin:-22px 0}
nav li.hd>a:after{content:"\25BE";font-size:10px;margin-left:6px;opacity:.7}
nav ul.dd{display:none;position:absolute;left:-18px;top:100%;min-width:240px;margin:0;padding:10px 0;background:#fff;border:1px solid #0a1a3a1f;border-radius:10px;box-shadow:0 18px 44px #0a1a3a26;list-style:none;gap:0;z-index:60}
nav li.hd:hover>ul.dd,nav li.hd:focus-within>ul.dd{display:block}
nav ul.dd li{position:relative;list-style:none;margin:0;padding:0}
nav ul.dd a,nav ul.dd span{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;font-size:13px;color:#0a1a3a;opacity:1;white-space:nowrap;border:0;cursor:pointer;outline:none}
nav ul.dd a:hover,nav ul.dd li.has:hover>span,nav ul.dd li.has:focus-within>span{color:#3b6cf2;background:#f1f5fd}
nav ul.dd li.has>span:after{content:"\203A";margin-left:22px;font-size:16px;line-height:1}
nav ul.dd ul{display:none;position:absolute;left:100%;top:-10px;min-width:250px;margin:0;padding:10px 0;background:#fff;border:1px solid #0a1a3a1f;border-radius:10px;box-shadow:0 18px 44px #0a1a3a26;list-style:none;gap:0}
nav ul.dd li.has:hover>ul,nav ul.dd li.has:focus-within>ul{display:block}