:root {
        --bg: #07050f;
        --bg2: #0e0920;
        --card: rgba(255, 255, 255, .055);
        --line: rgba(255, 255, 255, .12);
        --text: #f8f7ff;
        --muted: #bdb8d2;
        --pink: #ff38d1;
        --pink2: #ff7be5;
        --blue: #2d7dff;
        --cyan: #57efff;
        --purple: #8d3cff;
        --shadow: 0 24px 80px rgba(0, 0, 0, .35);
        --radius: 28px;
      }

      * {
        box-sizing: border-box
      }

      html {
        scroll-behavior: smooth
      }

      body {
        margin: 0;
        background:
          radial-gradient(circle at 10% 15%, rgba(106, 32, 255, .18), transparent 25%),
          radial-gradient(circle at 88% 12%, rgba(255, 35, 195, .14), transparent 24%),
          linear-gradient(180deg, #080510 0%, #0a0715 42%, #07050f 100%);
        color: var(--text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        overflow-x: hidden
      }

      body:before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: .18;
        background-image:
          linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
        background-size: 60px 60px;
        mask-image: linear-gradient(to bottom, black, transparent 85%)
      }

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

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

      .container {
        width: min(1180px, calc(100% - 40px));
        margin: auto
      }

      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        padding: 18px 0;
        transition: .25s
      }

      .nav.scrolled {
        background: rgba(7, 5, 15, .78);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--line);
        padding: 11px 0
      }

      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 900;
        letter-spacing: -.03em
      }

      .brand img {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 50%;
        /* box-shadow: 0 0 50px rgba(255, 56, 209, .25) */
      }

      .brand span {
        font-size: 17px
      }

      .brand b {
        color: var(--pink)
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 28px;
        color: #ddd8ed;
        font-size: 14px
      }

      .nav-links a:hover {
        color: white
      }

      .nav-cta {
        padding: 11px 17px;
        border: 1px solid rgba(255, 91, 220, .5);
        border-radius: 999px;
        background: rgba(255, 56, 209, .1)
      }

      .menu {
        display: none;
        background: none;
        border: 0;
        color: white;
        font-size: 26px
      }

      .hero {
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 145px 0 80px;
        position: relative
      }

      .orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(1px);
        pointer-events: none
      }

      .orb.one {
        width: 560px;
        height: 560px;
        right: -240px;
        top: 90px;
        border: 1px solid rgba(255, 64, 215, .35);
        box-shadow: inset 0 0 90px rgba(255, 44, 211, .08), 0 0 100px rgba(122, 46, 255, .08)
      }

      .orb.two {
        width: 380px;
        height: 380px;
        left: -210px;
        bottom: 30px;
        border: 1px solid rgba(65, 211, 255, .24)
      }

      .hero-grid {
        display: grid;
        grid-template-columns: 1.12fr .88fr;
        align-items: center;
        gap: 70px
      }

      .eyebrow {
        display: inline-flex;
        gap: 9px;
        align-items: center;
        padding: 8px 12px;
        border: 1px solid rgba(105, 225, 255, .22);
        border-radius: 999px;
        background: rgba(87, 239, 255, .06);
        color: #c8f9ff;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .15em;
        font-weight: 800
      }

      .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 14px var(--cyan)
      }

      h1 {
        font-size: clamp(48px, 7vw, 92px);
        line-height: .93;
        letter-spacing: -.065em;
        margin: 25px 0 24px;
        max-width: 850px
      }

      .gradient {
        background: linear-gradient(100deg, #fff 5%, var(--pink2) 45%, var(--cyan));
        -webkit-background-clip: text;
        color: transparent
      }

      .lead {
        font-size: 19px;
        line-height: 1.75;
        color: var(--muted);
        max-width: 690px
      }

      .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 13px;
        margin-top: 34px
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 15px 20px;
        border-radius: 14px;
        font-weight: 800;
        font-size: 14px;
        border: 1px solid var(--line);
        transition: .2s;
        cursor: pointer;
        color: white
      }

      .btn:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, .28)
      }

      .btn.primary {
        background: linear-gradient(120deg, var(--pink), #b53bff 52%, var(--blue));
        border: 0;
        box-shadow: 0 12px 40px rgba(226, 46, 255, .24)
      }

      .btn.glass {
        background: rgba(255, 255, 255, .055);
        backdrop-filter: blur(14px)
      }

      .hero-card {
        position: relative;
        padding: 18px;
        border-radius: 38px;
        background: linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .025));
        border: 1px solid rgba(255, 255, 255, .14);
        box-shadow: var(--shadow);
        transform: rotate(2deg)
      }

      .hero-card:before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 40px;
        background: linear-gradient(135deg, var(--pink), transparent 35%, transparent 65%, var(--cyan));
        z-index: -1;
        filter: blur(8px);
        opacity: .45
      }

      .hero-card img {
        display: block;
        width: 100%;
        border-radius: 26px
      }

      .statbar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        margin-top: 18px
      }

      .stat {
        padding: 16px 12px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(0, 0, 0, .2);
        text-align: center
      }

      .stat strong {
        display: block;
        font-size: 21px
      }

      .stat span {
        color: var(--muted);
        font-size: 11px
      }

      section {
        padding: 100px 0
      }

      .section-head {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        align-items: end;
        margin-bottom: 40px
      }

      .kicker {
        color: var(--pink2);
        text-transform: uppercase;
        letter-spacing: .16em;
        font-size: 12px;
        font-weight: 900
      }

      h2 {
        font-size: clamp(35px, 5vw, 58px);
        letter-spacing: -.045em;
        line-height: 1.03;
        margin: 10px 0 0
      }

      .section-head p {
        max-width: 480px;
        color: var(--muted);
        line-height: 1.7;
        margin: 0
      }

      .searchbox {
        display: flex;
        gap: 12px;
        padding: 10px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, .055);
        border-radius: 18px;
        margin-bottom: 28px;
        backdrop-filter: blur(16px)
      }

      .searchbox input {
        flex: 1;
        min-width: 0;
        background: transparent;
        border: 0;
        outline: 0;
        color: white;
        padding: 8px 12px
      }

      .searchbox input::placeholder {
        color: #8f8aa4
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px
      }

      .solution {
        min-height: 230px;
        padding: 24px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
        position: relative;
        overflow: hidden;
        transition: .25s;
        cursor: pointer
      }

      .solution:hover {
        transform: translateY(-5px);
        border-color: rgba(255, 93, 221, .4);
        box-shadow: 0 22px 60px rgba(0, 0, 0, .22)
      }

.solution:after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        right: -70px;
        top: -70px;
        background: var(--glow, var(--pink));
        filter: blur(45px);
        opacity: .18
      }

      .glow-pink {
        --glow: #ff38d1
      }

      .glow-purple {
        --glow: #8d3cff
      }

      .glow-cyan {
        --glow: #57efff
      }

      .glow-blue {
        --glow: #2d7dff
      }

      .glow-light-pink {
        --glow: #ff7be5
      }

      .icon {
        width: 48px;
        height: 48px;
        border-radius: 15px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, .07);
        border: 1px solid var(--line);
        font-size: 22px
      }

      .solution h3 {
        font-size: 20px;
        margin: 38px 0 9px
      }

      .solution p {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.55;
        margin: 0
      }

      .arrow {
        position: absolute;
        right: 22px;
        bottom: 20px;
        color: var(--cyan)
      }

      .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px
      }

      .panel {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 34px;
        background: rgba(255, 255, 255, .045);
        position: relative;
        overflow: hidden
      }

      .panel.pink {
        background: linear-gradient(145deg, rgba(255, 55, 209, .12), rgba(255, 255, 255, .03))
      }

      .panel.blue {
        background: linear-gradient(145deg, rgba(45, 125, 255, .12), rgba(255, 255, 255, .03))
      }

      .panel h3 {
        font-size: 30px;
        letter-spacing: -.035em;
        margin: 12px 0
      }

      .panel p {
        color: var(--muted);
        line-height: 1.7
      }

.chips {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
        margin: 22px 0
      }

      .chips-centered {
        justify-content: center;
        margin-top: 30px
      }

      .chip {
        padding: 9px 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: rgba(0, 0, 0, .18);
        font-size: 12px;
        color: #e4e0ee
      }

      .path {
        margin-top: 26px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px
      }

      .step {
        padding: 10px 12px;
        border-radius: 11px;
        background: rgba(255, 255, 255, .07);
        font-size: 12px;
        font-weight: 800
      }

      .down {
        color: var(--pink2)
      }

      .manifesto {
        text-align: center;
        padding: 80px 30px;
        border: 1px solid var(--line);
        border-radius: 34px;
        background:
          radial-gradient(circle at 50% 120%, rgba(48, 116, 255, .24), transparent 38%),
          radial-gradient(circle at 50% -30%, rgba(255, 43, 202, .2), transparent 38%), rgba(255, 255, 255, .035)
      }

      .manifesto h2 {
        max-width: 900px;
        margin: 12px auto 20px
      }

      .manifesto p {
        max-width: 720px;
        margin: auto;
        color: var(--muted);
        font-size: 18px;
        line-height: 1.75
      }

      .contact {
        display: grid;
        grid-template-columns: .8fr 1.2fr;
        gap: 30px
      }

      .contact-copy p {
        color: var(--muted);
        line-height: 1.7
      }

      .contact-details {
        display: grid;
        gap: 12px;
        margin-top: 28px
      }

      .contact-item {
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: rgba(255, 255, 255, .04)
      }

      form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px
      }

      .field {
        display: grid;
        gap: 7px
      }

      .field.full {
        grid-column: 1/-1
      }

      label {
        font-size: 12px;
        color: #d4d0df;
        font-weight: 700
      }

      .field input,
      .field textarea,
      .field select {
        width: 100%;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, .055);
        color: white;
        border-radius: 14px;
        padding: 14px;
        outline: 0
      }

      .field textarea {
        min-height: 120px;
        resize: vertical
      }

.field select option {
        background: #120c22
      }

      .form-msg {
        color: var(--cyan);
        font-size: 12px;
        margin-top: 8px
      }

      footer {
        border-top: 1px solid var(--line);
        padding: 35px 0;
        color: var(--muted);
        font-size: 13px
      }

.footer-inner {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: center
      }

      .footer-logo {
        width: 38px;
        height: 38px
      }

      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: .7s ease
      }

      .reveal.visible {
        opacity: 1;
        transform: none
      }

      @media(max-width:900px) {
        .nav-links {
          display: none
        }

        .menu {
          display: block
        }

        .hero-grid,
        .contact {
          grid-template-columns: 1fr
        }

        .hero-card {
          max-width: 540px;
          margin: auto
        }

        .grid {
          grid-template-columns: repeat(2, 1fr)
        }

        .section-head {
          display: block
        }

        .section-head p {
          margin-top: 18px
        }

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

      @media(max-width:560px) {
        .container {
          width: min(100% - 28px, 1180px)
        }

        .hero {
          padding-top: 120px
        }

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

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

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

        .section-head {
          margin-bottom: 28px
        }

        section {
          padding: 75px 0
        }

        form {
          grid-template-columns: 1fr
        }

        .field.full {
          grid-column: auto
        }

        .footer-inner {
          display: block
        }

        .footer-inner div:last-child {
          margin-top: 10px
        }

        .brand span {
          font-size: 15px
        }
      }