:root {
        --night: #030816;
        --deep: #071735;
        --ink: #091a3b;
        --text: #ecf8ff;
        --muted: #99aac4;
        --blue: #0077ff;
        --cyan: #00c8ff;
        --aqua: #00d4a6;
        --violet: #6a5cff;
        --white: #ffffff;
        --glass: rgba(255, 255, 255, 0.08);
        --line: rgba(150, 210, 255, 0.22);
        --shadow: 0 30px 90px rgba(0, 119, 255, 0.22);
        color: var(--text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        background: var(--night);
      }

      body {
        margin: 0;
        color: var(--text);
        background:
          radial-gradient(circle at 18% 0%, rgba(0, 200, 255, 0.22), transparent 28%),
          radial-gradient(circle at 80% 10%, rgba(106, 92, 255, 0.18), transparent 26%),
          linear-gradient(180deg, #030816 0%, #071327 46%, #eef8ff 100%);
      }

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

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

      .page {
        min-height: 100vh;
        overflow: hidden;
      }

      .nav {
        position: fixed;
        z-index: 50;
        top: 18px;
        left: clamp(14px, 4vw, 52px);
        right: clamp(14px, 4vw, 52px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        min-height: 64px;
        padding: 10px 12px 10px 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        background: rgba(3, 8, 22, 0.74);
        backdrop-filter: blur(22px);
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22);
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .brand img {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        box-shadow: 0 0 34px rgba(0, 200, 255, 0.38);
      }

      .brand strong {
        display: block;
        letter-spacing: 0.16em;
        font-size: 14px;
      }

      .brand span {
        display: block;
        margin-top: 2px;
        color: #9fc6e9;
        font-size: 11px;
        font-weight: 750;
        letter-spacing: 0.12em;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 18px;
        color: #c5d8ef;
        font-size: 13px;
        font-weight: 800;
      }

      .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 0 18px;
        font-weight: 900;
        white-space: nowrap;
      }

      .btn.primary {
        color: white;
        background: linear-gradient(135deg, var(--blue), var(--cyan) 52%, var(--aqua));
        box-shadow: 0 18px 48px rgba(0, 119, 255, 0.34);
      }

      .btn.ghost {
        border-color: rgba(178, 224, 255, 0.28);
        color: #e7f7ff;
        background: rgba(255, 255, 255, 0.08);
      }

      .hero {
        min-height: 100vh;
        position: relative;
        display: grid;
        align-items: end;
        padding: 124px clamp(18px, 5vw, 76px) 42px;
        background:
          linear-gradient(180deg, rgba(3, 8, 22, 0.14) 0%, rgba(3, 8, 22, 0.7) 62%, rgba(3, 8, 22, 0.98) 100%),
          url("/marketing/ondaflow-hero.png") center / cover no-repeat;
      }

      .hero::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 34%;
        pointer-events: none;
        background:
          linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.28), transparent),
          linear-gradient(180deg, transparent, #030816);
      }

      .hero-content {
        position: relative;
        z-index: 2;
        max-width: 1120px;
        display: grid;
        gap: 24px;
      }

      .eyebrow {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid rgba(0, 200, 255, 0.34);
        border-radius: 999px;
        color: #bfeeff;
        background: rgba(0, 119, 255, 0.12);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      .eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--cyan);
        box-shadow: 0 0 18px var(--cyan);
      }

      h1,
      h2,
      h3,
      p {
        margin: 0;
      }

      h1 {
        max-width: 1040px;
        font-size: clamp(48px, 8.7vw, 124px);
        line-height: 0.88;
        letter-spacing: 0;
      }

      .gradient-text {
        color: transparent;
        background: linear-gradient(90deg, #ffffff, #8ceaff 44%, #00d4a6);
        -webkit-background-clip: text;
        background-clip: text;
      }

      .lead {
        max-width: 820px;
        color: #c7d8ec;
        font-size: clamp(18px, 2vw, 24px);
        line-height: 1.5;
      }

      .hero-actions,
      .pilot-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .command-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        max-width: 980px;
      }

      .metric {
        min-height: 104px;
        display: grid;
        align-content: end;
        gap: 7px;
        padding: 16px;
        border: 1px solid rgba(166, 220, 255, 0.18);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
        backdrop-filter: blur(18px);
      }

      .metric strong {
        font-size: 28px;
        line-height: 1;
      }

      .metric span {
        color: #a7bdd7;
        font-size: 13px;
        font-weight: 800;
      }

      section {
        position: relative;
        padding: clamp(62px, 8vw, 120px) clamp(18px, 5vw, 76px);
      }

      .section-head {
        max-width: 920px;
        display: grid;
        gap: 14px;
        margin-bottom: 30px;
      }

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

      .section-head h2 {
        color: #f7fcff;
        font-size: clamp(36px, 5.6vw, 76px);
        line-height: 0.96;
        letter-spacing: 0;
      }

      .light .section-head h2,
      .light h3 {
        color: var(--ink);
      }

      .section-head p {
        color: #a9bad3;
        font-size: 18px;
        line-height: 1.6;
      }

      .light .section-head p,
      .light .module p,
      .light .legal p,
      .light .faq p,
      .light .feature p {
        color: #596a82;
      }

      .light {
        color: var(--ink);
        background:
          radial-gradient(circle at 12% 10%, rgba(0, 184, 255, 0.16), transparent 28%),
          linear-gradient(180deg, #eef8ff, #f8fcff);
      }

      .product-stage {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 28px;
        align-items: center;
      }

      .screen {
        overflow: hidden;
        border: 1px solid rgba(151, 218, 255, 0.22);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
        box-shadow: var(--shadow);
      }

      .screen img {
        width: 100%;
      }

      .feature-stack {
        display: grid;
        gap: 12px;
      }

      .feature {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
        border: 1px solid rgba(162, 220, 255, 0.16);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
      }

      .light .feature {
        border-color: #cfe4f5;
        background: rgba(255, 255, 255, 0.86);
      }

      .glyph {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        color: white;
        background: linear-gradient(135deg, var(--blue), var(--cyan), var(--aqua));
        font-weight: 950;
        box-shadow: 0 14px 34px rgba(0, 119, 255, 0.24);
      }

      .feature h3,
      .module h3,
      .legal h3 {
        margin-bottom: 6px;
        font-size: 20px;
      }

      .feature p,
      .module p,
      .legal p {
        line-height: 1.55;
      }

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

      .module,
      .legal,
      .faq details,
      .contact-panel {
        border: 1px solid rgba(158, 219, 255, 0.18);
        border-radius: 8px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
        box-shadow: 0 22px 70px rgba(0, 0, 0, 0.18);
      }

      .module {
        min-height: 230px;
        display: grid;
        align-content: space-between;
        gap: 20px;
        padding: 22px;
      }

      .module .number {
        color: #66dcff;
        font-weight: 950;
        letter-spacing: 0.18em;
      }

      .integrations {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 10px;
      }

      .pill {
        min-height: 68px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(165, 219, 255, 0.2);
        border-radius: 8px;
        color: #dff7ff;
        background: rgba(255, 255, 255, 0.07);
        font-weight: 900;
        text-align: center;
      }

      .light .module,
      .light .legal,
      .light .faq details,
      .light .contact-panel {
        border-color: #cfe4f5;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 22px 70px rgba(25, 94, 150, 0.09);
      }

      .pilot {
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background:
          linear-gradient(135deg, rgba(0, 119, 255, 0.34), rgba(0, 212, 166, 0.18)),
          url("/marketing/ondaflow-brand-board.png") center / cover no-repeat;
      }

      .pilot-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
        gap: 28px;
        align-items: center;
        padding: clamp(42px, 7vw, 96px) clamp(18px, 5vw, 76px);
        background: rgba(3, 8, 22, 0.72);
      }

      .pilot h2 {
        max-width: 900px;
        font-size: clamp(38px, 6.2vw, 86px);
        line-height: 0.94;
      }

      .pilot p {
        max-width: 720px;
        margin-top: 16px;
        color: #ccecff;
        font-size: 19px;
        line-height: 1.6;
      }

      .pilot-card {
        padding: 22px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.09);
        backdrop-filter: blur(14px);
      }

      .pilot-card ul {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
      }

      .pilot-card li {
        display: flex;
        align-items: center;
        gap: 10px;
        list-style: none;
        color: #e5f8ff;
      }

      .pilot-card li span {
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        border-radius: 50%;
        color: #021326;
        background: linear-gradient(135deg, var(--cyan), var(--aqua));
        box-shadow: 0 0 22px rgba(0, 212, 166, 0.34);
        font-weight: 900;
      }

      .payment-preview {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 18px;
      }

      .payment-preview span {
        min-height: 78px;
        display: grid;
        align-content: center;
        gap: 4px;
        padding: 12px;
        border: 1px solid rgba(0, 200, 255, 0.24);
        border-radius: 8px;
        color: #bfeeff;
        background:
          linear-gradient(180deg, rgba(0, 200, 255, 0.12), rgba(255, 255, 255, 0.04)),
          rgba(3, 8, 22, 0.44);
      }

      .payment-preview strong {
        color: #ffffff;
        font-size: 18px;
      }

      .contact {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 18px;
        align-items: start;
      }

      .contact-panel {
        padding: 24px;
      }

      .contact-copy {
        display: grid;
        gap: 16px;
      }

      .contact-copy p {
        color: #596a82;
        line-height: 1.6;
      }

      .contact-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      label {
        display: grid;
        gap: 7px;
        color: #183253;
        font-size: 13px;
        font-weight: 900;
      }

      input,
      textarea,
      select {
        width: 100%;
        min-height: 48px;
        border: 1px solid #c8dff1;
        border-radius: 8px;
        padding: 0 13px;
        color: #07193f;
        background: #fbfdff;
        font: inherit;
      }

      textarea {
        min-height: 122px;
        padding-top: 13px;
        resize: vertical;
      }

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

      .consent {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #596a82;
        line-height: 1.45;
      }

      .consent input {
        width: auto;
        min-height: auto;
        margin-top: 4px;
      }

      .form-status {
        color: #075fbf;
        font-weight: 900;
      }

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

      .legal {
        padding: 20px;
      }

      .faq {
        display: grid;
        gap: 10px;
      }

      .faq details {
        padding: 18px 20px;
      }

      .faq summary {
        cursor: pointer;
        color: var(--ink);
        font-weight: 950;
      }

      .faq p {
        margin-top: 10px;
        line-height: 1.55;
      }

      .footer {
        display: grid;
        gap: 18px;
        padding: 32px clamp(18px, 5vw, 76px);
        background: #020612;
        color: #d7e8fa;
      }

      .footer-top {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
      }

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

      .social a {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        color: #94eaff;
        background: rgba(255, 255, 255, 0.06);
        font-weight: 950;
      }

      .fineprint {
        color: #9fb0c7;
        font-size: 13px;
        line-height: 1.55;
      }

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

        .command-strip,
        .product-stage,
        .module-grid,
        .integrations,
        .pilot-inner,
        .contact,
        .legal-grid {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 680px) {
        .nav {
          top: 10px;
        }

        .brand span {
          display: none;
        }

        .hero {
          min-height: 92vh;
          padding-top: 106px;
        }

        .hero-actions,
        .pilot-actions,
        .contact-form,
        .payment-preview {
          display: grid;
          grid-template-columns: 1fr;
        }

        .btn {
          width: 100%;
        }
      }