:root {
      --bg: #05040a;
      --bg-soft: #0b0815;
      --panel: rgba(255, 255, 255, 0.055);
      --panel-strong: rgba(255, 255, 255, 0.095);
      --text: #f7f4ff;
      --muted: #bcb2d6;
      --purple: #9a5cff;
      --purple-2: #6d32ff;
      --ble: #0082fc;
      --ble-soft: rgba(0, 130, 252, 0.22);
      --line: rgba(255, 255, 255, 0.16);
      --green: #62f3c6;
      --orange: #ffb86b;
      --radius: 28px;
      --shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      background:
        radial-gradient(circle at 18% 8%, rgba(154, 92, 255, 0.25), transparent 32%),
        radial-gradient(circle at 82% 15%, rgba(0, 130, 252, 0.18), transparent 34%),
        radial-gradient(circle at 50% 75%, rgba(109, 50, 255, 0.16), transparent 42%),
        var(--bg);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.45;
      overflow-x: hidden;
    }

    .preorder-note {
      margin-top: 16px;
      max-width: 620px;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.6;
    }

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

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

    .nav {
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(22px);
      background: linear-gradient(to bottom, rgba(5, 4, 10, 0.9), rgba(5, 4, 10, 0.56));
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .nav-inner {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 18px 0;
    }

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

    .brand-mark {
      width: 178px;
      height: auto;
      display: block;
      filter: drop-shadow(0 0 20px rgba(154, 92, 255, 0.28));
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
      color: var(--muted);
      font-size: 14px;
      letter-spacing: 0.01em;
    }

    .nav-links a:hover { color: var(--text); }

    .nav-cta {
      padding: 10px 16px;
      border: 1px solid rgba(154,92,255,0.48);
      border-radius: 999px;
      color: var(--text);
      background: rgba(154,92,255,0.12);
      box-shadow: inset 0 0 24px rgba(154,92,255,0.12);
    }

    .hero {
      min-height: 820px;
      padding: 40px 0 60px;
      position: relative;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.02fr 0.98fr;
      align-items: center;
      gap: 44px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 13px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 999px;
      background: rgba(255,255,255,0.045);
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 22px;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--ble);
      box-shadow: 0 0 24px var(--ble);
    }

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

    h1 {
      font-size: clamp(58px, 8vw, 100px);
      line-height: 1;
      letter-spacing: -0.065em;
      margin-bottom: 28px;
    }

    h2 {
      font-size: clamp(42px, 6vw, 82px);
      line-height: 0.92;
      letter-spacing: -0.065em;
      margin-bottom: 22px;
    }

    h3 {
      font-size: 24px;
      letter-spacing: -0.035em;
      margin-bottom: 10px;
    }

    .ble { color: var(--ble); text-shadow: 0 0 32px rgba(0,130,252,0.45); }
    .purple { color: var(--purple); text-shadow: 0 0 28px rgba(154,92,255,0.4); }

    .hero-copy {
      color: var(--muted);
      font-size: clamp(19px, 2vw, 25px);
      max-width: 650px;
      margin-bottom: 34px;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      font-weight: 700;
      border: 1px solid rgba(255,255,255,0.14);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .button:hover { transform: translateY(-2px); }

    .button.primary {
      background: linear-gradient(135deg, var(--purple), var(--purple-2));
      box-shadow: 0 22px 55px rgba(109, 50, 255, 0.38);
    }

    .button.secondary {
      background: rgba(255,255,255,0.06);
      color: var(--text);
    }

    .hero-visual {
      position: relative;
      min-height: 560px;
      border-radius: 42px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 48%, rgba(154,92,255,0.26), transparent 30%),
        radial-gradient(circle at 28% 26%, rgba(0,130,252,0.2), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.025));
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: var(--shadow);
    }

    .mesh {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: radial-gradient(circle at 50% 50%, black, transparent 78%);
    }

    .product-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 36px;
    }

    .product-column {
    border-radius: var(--radius);
    padding: 28px;
    background:
    radial-gradient(circle at 20% 12%, rgba(0, 130, 252, 0.28), transparent 42%),
    linear-gradient(145deg, rgba(0, 130, 252, 0.16), rgba(255,255,255,0.035));
    border: 1px solid rgba(0, 130, 252, 0.28);
    box-shadow:
    0 25px 60px rgba(0,0,0,0.23),
    inset 0 0 42px rgba(0, 130, 252, 0.08);
    box-shadow: 0 25px 60px rgba(0,0,0,0.23);
    }

    .product-column h3 {
    margin-bottom: 14px;
    }

    .product-column p {
    color: var(--muted);
    font-size: 18px;
    margin-bottom: 0;
    }

    @media (max-width: 780px) {
    .product-columns {
        grid-template-columns: 1fr;
    }
    }


    .gateway {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 250px;
      height: 320px;
      border-radius: 38px;
      background:
        linear-gradient(145deg, rgba(24,20,38,0.98), rgba(8,7,14,0.96)),
        #111;
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow:
        0 40px 100px rgba(0,0,0,0.6),
        inset 0 0 80px rgba(154,92,255,0.08),
        0 0 90px rgba(154,92,255,0.16);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 28px;
    }

    .gateway .top-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 22px var(--green);
    }

    .gateway-title {
      font-size: 35px;
      font-weight: 900;
      letter-spacing: -0.07em;
      line-height: 0.92;
    }

    .gateway-sub {
      color: var(--muted);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .sensor, .host-card {
      position: absolute;
      border-radius: 22px;
      background: rgba(6, 7, 16, 0.72);
      border: 1px solid rgba(255,255,255,0.13);
      backdrop-filter: blur(16px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.32);
      padding: 16px;
    }

    .sensor { width: 168px; }
    .sensor strong { display: block; font-size: 15px; margin-bottom: 4px; }
    .sensor span { color: var(--muted); font-size: 12px; }

    .sensor.motion { left: 34px; top: 92px; }
    .sensor.ecg { right: 34px; top: 126px; }
    .sensor.future { left: 56px; bottom: 98px; }

    .host-card {
      right: 34px;
      bottom: 72px;
      width: 190px;
    }

    .host-card .bar {
      height: 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.09);
      overflow: hidden;
      margin-top: 10px;
    }

    .host-card .bar span {
      display: block;
      height: 100%;
      width: 76%;
      background: linear-gradient(90deg, var(--ble), var(--purple));
      border-radius: inherit;
    }

    .wave {
      position: absolute;
      border: 1.5px solid rgba(0,130,252,0.45);
      border-left: 0;
      border-bottom: 0;
      transform: rotate(45deg);
      filter: drop-shadow(0 0 12px rgba(0,130,252,0.4));
    }

    .wave.a { width: 160px; height: 160px; left: 176px; top: 138px; border-radius: 0 100% 0 0; }
    .wave.b { width: 130px; height: 130px; right: 188px; top: 178px; border-radius: 0 100% 0 0; transform: rotate(224deg); }
    .wave.c { width: 140px; height: 140px; left: 190px; bottom: 128px; border-radius: 0 100% 0 0; transform: rotate(-18deg); }

    .ticker {
      margin-top: 52px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 26px;
      overflow: hidden;
      background: rgba(255,255,255,0.045);
    }

    .ticker div {
      padding: 24px;
      border-right: 1px solid rgba(255,255,255,0.1);
    }

    .ticker div:last-child { border-right: 0; }
    .ticker strong { display: block; font-size: 24px; letter-spacing: -0.05em; }
    .ticker span { color: var(--muted); font-size: 13px; }

    section { padding: 94px 0; position: relative; }

    .section-kicker {
      color: var(--purple);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.19em;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .section-copy {
      color: var(--muted);
      font-size: 20px;
      max-width: 760px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 42px;
    }

    .card {
      min-height: 50px;
      border-radius: var(--radius);
      align-items: center;
      padding: 14px;
      background: linear-gradient(145deg, rgba(255,255,255,0.082), rgba(255,255,255,0.035));
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 25px 60px rgba(0,0,0,0.23);
      position: relative;
      overflow: hidden;
    }

    .card::after {
      content: "";
      position: absolute;
      inset: auto -20% -40% 20%;
      height: 50px;
      background: radial-gradient(circle, rgba(154,92,255,0.18), transparent 68%);
    }

    .icon {
      width: 0px;
      height: 0px;
      border-radius: 16px;
      background: rgba(0,130,252,0.12);
      border: 1px solid rgba(0,130,252,0.35);
      display: grid;
      place-items: center;
      color: var(--ble);
      font-size: 22px;
      margin-bottom: 50px;
    }

    .card p, .split p, .mini-card p { color: var(--muted); margin-bottom: 0; }

    .split {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 34px;
      align-items: center;
    }

    .diagram {
      min-height: 540px;
      border-radius: 40px;
      border: 1px solid rgba(255,255,255,0.12);
      background:
        radial-gradient(circle at 50% 50%, rgba(0,130,252,0.14), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,0.085), rgba(255,255,255,0.03));
      position: relative;
      overflow: hidden;
    }

    .node {
      position: absolute;
      padding: 14px 16px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 18px;
      background: rgba(5,4,10,0.72);
      backdrop-filter: blur(14px);
      box-shadow: 0 22px 46px rgba(0,0,0,0.3);
      min-width: 150px;
      max-width: 170px;
      z-index: 2;
      font-size: 14px;
    }

    .center-node {
      position: absolute;
  
      padding-top: 34px;
      box-sizing: border-box;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 300px;
      border-radius: 36px;
      background: linear-gradient(145deg, rgba(154,92,255,0.25), rgba(0,130,252,0.12));
      border: 1px solid rgba(255,255,255,0.2);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      font-weight: 900;
      font-size: 24px;
      letter-spacing: -0.055em;
      box-shadow: 0 0 80px rgba(154,92,255,0.22);
      z-index: 3;
    }

    .center-label {
      line-height: 0.92;
      text-align: center;
    }

    /* Four sensor blocks arranged around the gateway */
    .node.motion {
      left: 8%;
      top: 11%;
    }

    .node.imu {
      left: 8%;
      top: 31%;
    }

    .node.ecg {
      left: 8%;
      top: 51%;
    }

    .node.future {
      left: 8%;
      top: 71%;
    }

    /* Host SDK centered on the right */
    .node.host {
      right: 2%;
      top: 50%;
      transform: translateY(-50%);
    }

    .line {
      position: absolute;
      left: 50%;
      top: 50%;
      height: 2px;
      background: linear-gradient(90deg, var(--purple), var(--ble), transparent);
      transform-origin: left center;
      opacity: 0.75;
      filter: drop-shadow(0 0 10px rgba(0,130,252,0.5));
      z-index: 1;
      pointer-events: none;
    }

    /* Center of gateway to left-side sensor blocks */
    .line.l1 {
      width: 38%;
      transform: rotate(220deg);
    }

    .line.l2 {
      width: 34%;
      transform: rotate(202deg);
    }

    .line.l3 {
      width: 37%;
      transform: rotate(171deg);
    }

    .line.l4 {
      width: 38%;
      transform: rotate(140deg);
    }

    /* Center of gateway to Host SDK */
    .line.l5 {
      width: 31%;
      transform: rotate(0deg);
    }
    .performance {
      border-radius: 46px;
      background:
        radial-gradient(circle at 40% 32%, rgba(0,130,252,0.25), transparent 28%),
        radial-gradient(circle at 67% 70%, rgba(154,92,255,0.26), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.13);
      padding: clamp(34px, 7vw, 78px);
      overflow: hidden;
      position: relative;
    }

    .performance h2 {
      max-width: 900px;
      font-size: clamp(50px, 8vw, 118px);
    }

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

    .metric {
      padding: 24px;
      border-radius: 24px;
      background: rgba(5,4,10,0.48);
      border: 1px solid rgba(255,255,255,0.12);
    }

    .metric strong {
      display: block;
      font-size: 46px;
      letter-spacing: -0.08em;
      margin-bottom: 2px;
    }

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

    .code-area {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 42px;
    }

    .code-panel {
      border-radius: 30px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.12);
      background: #070611;
      box-shadow: var(--shadow);
    }

    .code-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      color: var(--muted);
      font-size: 13px;
    }

    .dots { display: flex; gap: 7px; }
    .dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.24); }
    .dots span:nth-child(1) { background: var(--purple); }
    .dots span:nth-child(2) { background: var(--ble); }
    .dots span:nth-child(3) { background: var(--green); }

    pre {
      margin: 0;
      padding: 22px;
      overflow-x: auto;
      color: #e9e3ff;
      font-size: 13px;
      line-height: 1.7;
    }

    code .key { color: #8ecbff; }
    code .str { color: #d9b6ff; }
    code .num { color: #62f3c6; }
    code .bool { color: #ffb86b; }

    .diagnostics {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 34px;
      align-items: start;
    }

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

    .chip {
      min-height: 126px;
      border-radius: 24px;
      padding: 20px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.11);
    }

    .chip strong { display: block; font-size: 28px; letter-spacing: -0.05em; }
    .chip span { color: var(--muted); font-size: 13px; }

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

    .mini-card {
      padding: 24px;
      min-height: 190px;
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.055);
    }

    .contact-section {
      min-height: 560px;
      display: grid;
      place-items: center;
      text-align: center;
      border-radius: 50px 50px 0 0;
      background:
        radial-gradient(circle at 50% 30%, rgba(154,92,255,0.28), transparent 34%),
        radial-gradient(circle at 60% 64%, rgba(0,130,252,0.18), transparent 36%);
    }

    .contact-section .page {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .contact-section h2 {
      max-width: 920px;
      margin-left: auto;
      margin-right: auto;
    }

    .contact-section p {
      color: var(--muted);
      font-size: 22px;
      max-width: 760px;
      margin-left: auto;
      margin-right: auto;
    }

    .contact-section .actions {
      width: 100%;
      justify-content: center;
      margin-top: 28px;
    }

    footer {
      border-top: 1px solid rgba(255,255,255,0.1);
      padding: 26px 0 40px;
      color: var(--muted);
      font-size: 14px;
    }

    .footer-inner {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }

    @media (max-width: 980px) {
      .hero-grid, .split, .diagnostics, .code-area { grid-template-columns: 1fr; }
      .cards, .ticker, .perf-grid, .mini-grid { grid-template-columns: repeat(2, 1fr); }
      .hero { padding-top: 62px; }
      .hero-visual { min-height: 520px; }
      .nav-links { display: none; }
    }

    @media (max-width: 640px) {
      .page, .nav-inner, .footer-inner { width: min(100% - 26px, 1180px); }
      h1 { font-size: 58px; }
      h2 { font-size: 44px; }
      .cards, .ticker, .perf-grid, .mini-grid, .dash { grid-template-columns: 1fr; }
      .ticker div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
      .brand-mark { width: 150px; }
      .sensor, .host-card { transform: scale(.88); }
      .sensor.motion { left: 6px; }
      .sensor.ecg { right: 2px; }
      .gateway { width: 220px; height: 290px; }
      .node { min-width: 140px; font-size: 13px; }
      .footer-inner { flex-direction: column; }
    }