:root {
      color-scheme: dark;
      --ink: #f3f4fa;
      --muted: #b3b4c6;
      --dim: #767789;
      --page: #080911;
      --panel: rgba(20, 21, 35, .64);
      --line: rgba(232, 234, 255, .16);
      --lime: #ff6500;
      --cyan: #51e4ff;
      --violet: #9d76ff;
      --coral: #ff8d76;
    }

    * { box-sizing: border-box; }
    html { background: var(--page); overflow-x: hidden; }
    body {
      min-height: 100vh;
      margin: 0;
      overflow-x: hidden;
      background:
        radial-gradient(ellipse 72% 55% at 90% 4%, rgba(110, 74, 255, .18), transparent 65%),
        radial-gradient(ellipse 62% 62% at 10% 90%, rgba(0, 204, 219, .09), transparent 68%),
        #080911;
      color: var(--ink);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body::before {
      content: "";
      pointer-events: none;
      position: fixed;
      inset: 0;
      z-index: 5;
      opacity: .11;
      background-image: url("grain.svg");
      mix-blend-mode: soft-light;
    }

    .site-shell {
      isolation: isolate;
      position: relative;
      min-height: 100svh;
      padding: 28px clamp(24px, 5.5vw, 104px) 32px;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      overflow-x: clip;
    }

    .aura {
      position: absolute;
      width: min(68vw, 960px);
      aspect-ratio: 1.55;
      top: 13%;
      right: -13%;
      border-radius: 50%;
      z-index: -1;
      filter: blur(36px);
      opacity: .9;
      background:
        radial-gradient(circle at 30% 36%, rgba(81, 228, 255, .48), transparent 13%),
        radial-gradient(circle at 62% 52%, rgba(157, 118, 255, .5), transparent 28%),
        radial-gradient(circle at 45% 74%, rgba(255, 101, 0, .19), transparent 34%);
      animation: drift 13s ease-in-out infinite alternate;
    }

    .topbar {
      width: 100%;
      max-width: 1392px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      letter-spacing: -.02em;
    }

    .brand-logo {
      position: relative;
      display: block;
      width: 108px;
      height: 20px;
      overflow: hidden;
      text-decoration: none;
    }
    .brand-logo:focus-visible {
      outline: 3px solid var(--cyan);
      outline-offset: 6px;
      border-radius: 3px;
    }
    .brand-logo img {
      position: absolute;
      display: block;
      width: 108px;
      max-width: none;
      height: auto;
      transform: translateY(-19px);
      filter: invert(1) brightness(2.5);
    }

    .status {
      display: inline-flex;
      align-items: center;
      gap: .52rem;
      padding: .49rem .72rem .5rem;
      border: 1px solid rgba(255, 101, 0, .34);
      border-radius: 999px;
      color: #ffd5b8;
      background: rgba(255, 101, 0, .08);
      font-size: .72rem;
      font-weight: 650;
      letter-spacing: .055em;
      text-transform: uppercase;
    }
    .status::before {
      content: "";
      width: .43rem;
      height: .43rem;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 0 4px rgba(255, 101, 0, .12), 0 0 12px rgba(255, 101, 0, .78);
    }

    main {
      width: 100%;
      max-width: 1392px;
      margin: auto;
      display: grid;
      grid-template-columns: minmax(0, .91fr) minmax(470px, 1.09fr);
      align-items: center;
      gap: clamp(30px, 7vw, 118px);
      padding: clamp(48px, 8vh, 92px) 0 clamp(18px, 3vh, 36px);
    }

    .hero-copy { max-width: 620px; }
    .eyebrow {
      margin: 0 0 22px;
      color: var(--lime);
      font-size: .72rem;
      font-weight: 760;
      letter-spacing: .16em;
    }
    h1 {
      max-width: 590px;
      margin: 0;
      font-size: clamp(3rem, 5.35vw, 5.45rem);
      line-height: .98;
      letter-spacing: -.075em;
      font-weight: 690;
      text-wrap: balance;
    }
    h1 em {
      position: relative;
      color: var(--cyan);
      font-style: normal;
      text-shadow: 0 0 31px rgba(81, 228, 255, .2);
    }
    h1 em::after {
      content: "";
      position: absolute;
      height: .11em;
      left: .02em;
      right: -.02em;
      bottom: -.035em;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--cyan), var(--violet), var(--coral));
      opacity: .8;
    }
    .intro {
      max-width: 540px;
      margin: 28px 0 0;
      color: var(--muted);
      font-size: clamp(1rem, 1.35vw, 1.17rem);
      line-height: 1.62;
      letter-spacing: -.015em;
    }

    .signup {
      max-width: 520px;
      margin-top: clamp(32px, 5vh, 52px);
      padding: 21px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(29, 30, 47, .8), rgba(16, 17, 29, .55));
      box-shadow: 0 22px 54px rgba(0, 0, 0, .24), inset 0 1px rgba(255,255,255,.04);
      backdrop-filter: blur(16px);
    }
    .signup h2 {
      margin: 0 0 14px;
      font-size: 1rem;
      line-height: 1.2;
      letter-spacing: -.03em;
      font-weight: 680;
    }
    .signup-form { display: flex; gap: 10px; }
    .field { flex: 1 1 auto; min-width: 0; }
    .hp-field {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    input, button { font: inherit; }
    input {
      width: 100%;
      min-height: 48px;
      padding: 0 14px;
      border: 1px solid rgba(238, 240, 255, .19);
      border-radius: 10px;
      outline: none;
      color: var(--ink);
      background: rgba(3, 4, 10, .5);
      font-size: .94rem;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    input::placeholder { color: #87899c; opacity: 1; }
    input:hover { border-color: rgba(238, 240, 255, .32); }
    input:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(81, 228, 255, .16); }
    input[aria-invalid="true"] { border-color: #ff9988; box-shadow: 0 0 0 4px rgba(255, 153, 136, .16); }
    button {
      flex: 0 0 auto;
      min-height: 48px;
      padding: 0 18px;
      cursor: pointer;
      border: 0;
      border-radius: 10px;
      color: #1d0b00;
      background: var(--lime);
      box-shadow: 0 8px 21px rgba(255, 101, 0, .24);
      font-size: .9rem;
      font-weight: 770;
      letter-spacing: -.015em;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    button:hover { transform: translateY(-2px); background: #ff6500; box-shadow: 0 12px 27px rgba(255, 101, 0, .36); }
    button:active { transform: translateY(0); }
    button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
    button:disabled { cursor: wait; opacity: .72; transform: none; box-shadow: none; }
    .reassurance { margin: 13px 0 0; color: #c2c5d4; font-size: .76rem; line-height: 1.45; }
    .form-message { min-height: 1.25em; margin: 10px 0 0; color: #d8ffc8; font-size: .81rem; font-weight: 560; }
    .form-message[data-state="error"] { color: #ffd0c8; }

    .visual {
      position: relative;
      min-height: min(47vw, 620px);
      display: grid;
      place-items: center;
    }
    .visual::before {
      content: "";
      position: absolute;
      width: min(92%, 570px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(53, 43, 112, .5), rgba(48, 205, 226, .13) 39%, transparent 68%);
      filter: blur(5px);
      animation: breathe 8s ease-in-out infinite;
    }
    .orbit {
      position: absolute;
      border: 1px solid rgba(131, 119, 233, .22);
      border-radius: 50%;
      transform: rotate(-17deg);
    }
    .orbit-one { width: min(86%, 610px); aspect-ratio: 1.9; }
    .orbit-two { width: min(72%, 500px); aspect-ratio: 1.17; border-color: rgba(81, 228, 255, .2); transform: rotate(40deg); }
    .device-wrap {
      position: relative;
      z-index: 1;
      width: min(122%, 830px);
      margin-right: -8%;
      transform: rotate(-2.5deg) translateY(-1%);
      filter: drop-shadow(0 40px 38px rgba(0, 0, 0, .66)) drop-shadow(0 0 44px rgba(93, 74, 255, .18));
      animation: hover 7s ease-in-out infinite;
    }
    .device {
      width: 100%;
      display: block;
      height: auto;
    }
    .label-card {
      position: absolute;
      z-index: 2;
      right: 1%;
      bottom: 10%;
      display: grid;
      grid-template-columns: 8px auto;
      gap: 10px;
      align-items: center;
      max-width: 194px;
      padding: 10px 13px;
      border: 1px solid rgba(233, 240, 255, .19);
      border-radius: 11px;
      color: #daddf1;
      background: rgba(19, 20, 34, .62);
      box-shadow: 0 15px 34px rgba(0,0,0,.28);
      backdrop-filter: blur(15px);
      font-size: .7rem;
      line-height: 1.25;
      letter-spacing: .015em;
    }
    .label-card::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 12px rgba(255, 101, 0, .75); }
    .label-card strong { display: block; color: #fff; font-size: .73rem; }
    .footer-note {
      width: 100%;
      max-width: 1392px;
      margin: 0 auto;
      color: #c2c5d4;
      font-size: .73rem;
      letter-spacing: .01em;
    }
    .footer-note span { color: var(--coral); }

    .projects {
      width: 100%;
      max-width: 1392px;
      margin: clamp(44px, 8vh, 92px) auto 0;
      padding-top: clamp(32px, 5vw, 58px);
      padding-bottom: clamp(32px, 5vw, 58px);
      border-top: 1px solid var(--line);
    }
    .projects-intro {
      display: grid;
      grid-template-rows: auto auto;
      gap: 24px clamp(30px, 6vw, 100px);
      max-width: 100%;
      text-align: center;
      justify-content: center;
      align-items: center;  
    }
    .projects-eyebrow {
      margin: 0 0 13px;
      color: var(--cyan);
      font-size: .72rem;
      font-weight: 760;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .projects h2 {
      max-width: 650px;
      margin: 0;
      font-size: clamp(1.7rem, 3vw, 3.15rem);
      line-height: 1.04;
      letter-spacing: -.055em;
    }
    .projects-lead {
      max-width: 450px;
      margin: 0 0 .25rem;
      color: var(--muted);
      font-size: clamp(.98rem, 1.2vw, 1.08rem);
      line-height: 1.55;
    }
    .project-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: clamp(27px, 4vw, 42px);
    }
    .project-card {
      position: relative;
      min-height: 202px;
      padding: 21px;
      overflow: hidden;
      border: 1px solid rgba(232, 234, 255, .17);
      border-radius: 17px;
      background: linear-gradient(145deg, rgba(29, 31, 49, .76), rgba(13, 14, 25, .64));
      box-shadow: inset 0 1px rgba(255,255,255,.045), 0 16px 40px rgba(0,0,0,.13);
    }
    .project-card::after {
      content: "";
      position: absolute;
      width: 130px;
      height: 130px;
      right: -47px;
      bottom: -68px;
      border: 1px solid rgba(81, 228, 255, .26);
      border-radius: 50%;
      box-shadow: 0 0 0 18px rgba(157, 118, 255, .045), 0 0 45px rgba(81, 228, 255, .08);
    }
    .project-card:nth-child(2)::after { border-color: rgba(255, 141, 118, .31); box-shadow: 0 0 0 18px rgba(255, 101, 0, .045), 0 0 45px rgba(255, 141, 118, .08); }
    .project-card:nth-child(3)::after { border-color: rgba(157, 118, 255, .34); box-shadow: 0 0 0 18px rgba(81, 228, 255, .045), 0 0 45px rgba(157, 118, 255, .08); }
    .project-type {
      display: inline-flex;
      position: relative;
      z-index: 1;
      align-items: center;
      gap: .46rem;
      margin: 0 0 27px;
      color: #cfd2e3;
      font-size: .7rem;
      font-weight: 720;
      letter-spacing: .075em;
      text-transform: uppercase;
    }
    .project-type::before { content: "+"; color: var(--lime); font-size: 1rem; line-height: .7; }
    .project-card h3 {
      position: relative;
      z-index: 1;
      margin: 8px 0 0;
      color: #fff;
      font-size: 1.25rem;
      letter-spacing: -.035em;
    }
    .project-card p {
      position: relative;
      z-index: 1;
      max-width: 250px;
      margin: 8px 0 0;
      color: #c2c5d4;
      font-size: .87rem;
      line-height: 1.48;
    }

    .skip-link {
      position: fixed;
      z-index: 20;
      top: 12px;
      left: 12px;
      padding: 10px 14px;
      border-radius: 8px;
      color: #080911;
      background: var(--cyan);
      font-weight: 760;
      text-decoration: none;
      transform: translateY(-160%);
      transition: transform .18s ease;
    }
    .skip-link:focus { transform: translateY(0); outline: 3px solid #fff; outline-offset: 3px; }

    @keyframes hover { 0%,100% { transform: rotate(-2.5deg) translateY(-1%); } 50% { transform: rotate(-1deg) translateY(1.3%); } }
    @keyframes breathe { 0%,100% { transform: scale(.94); opacity: .76; } 50% { transform: scale(1.08); opacity: 1; } }
    @keyframes drift { from { transform: translate(-2%, -2%) rotate(-3deg); } to { transform: translate(4%, 5%) rotate(4deg); } }
    @media (max-width: 880px) {
      .site-shell { padding: 22px 24px 26px; }
      main { grid-template-columns: 1fr; gap: 22px; padding-top: 60px; }
      .hero-copy { max-width: 660px; }
      .visual { min-height: min(79vw, 520px); max-width: 700px; width: 100%; margin: 0 auto; }
      .device-wrap { width: min(113%, 700px); margin-right: -4%; }
      .label-card { right: 3%; bottom: 6%; }
    }
    @media (max-width: 520px) {
      .site-shell { padding-inline: 18px; }
      .topbar { align-items: flex-start; }
      .status { margin-top: -3px; font-size: .65rem; padding: .43rem .61rem; }
      main { padding-top: 47px; }
      h1 { font-size: clamp(2.8rem, 13.1vw, 4.3rem); }
      .intro { margin-top: 23px; line-height: 1.55; }
      .signup { margin-top: 30px; padding: 17px; }
      .signup-form { display: grid; gap: 9px; }
      button { width: 100%; }
      .projects-intro { grid-template-columns: 1fr; gap: 15px; }
      .project-grid { grid-template-columns: 1fr; }
      .project-card { min-height: 168px; }
      .visual { min-height: 66vw; margin-top: 6px; }
      .label-card { font-size: .62rem; padding: 8px 10px; right: 0; bottom: 1%; }
      .label-card strong { font-size: .66rem; }
      .footer-note { margin-top: 8px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }
    @media (forced-colors: active) {
      .skip-link, .brand-logo:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; }
    }