:root{
      --bg:#0A0A0A;
      --surface:#101010;
      --surface2:#141414;
      --text:#F4F4F5;
      --muted:#A1A1AA;
      --line:#242424;

      --accent:#00D4FF;

      --r:16px;
      --r2:22px;

      --max:480px;
      --pad:16px;

      --ease:cubic-bezier(.2,.9,.2,1);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      background:var(--bg);
      color:var(--text);
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button{font-family:inherit}
    img{max-width:100%;display:block}

    ::selection{background:rgba(0,212,255,.22)}

    .page{
      min-height:100%;
      display:flex;
      justify-content:center;
      padding:12px;
      padding-bottom:24px;
    }
    .app{
      width:100%;
      max-width:var(--max);
      margin:0 auto;
      border:1px solid var(--line);
      border-radius:var(--r2);
      overflow:hidden;
      background:var(--surface);
    }

    .sticky{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(16,16,16,.92);
      backdrop-filter:saturate(120%) blur(10px);
      border-bottom:1px solid var(--line);
    }
    .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px var(--pad);
      gap:12px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .logoMark{
      width:32px;height:32px;border-radius:12px;
      border:1px solid var(--line);
      display:grid;place-items:center;
      color:var(--accent);
      background:var(--surface2);
    }
    .brandText{
      display:flex;
      flex-direction:column;
      line-height:1.05;
      min-width:0;
    }
    .brandText strong{
      font-size:13px;
      letter-spacing:.02em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brandText span{
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .hActions{display:flex;align-items:center;gap:10px}
    .iconBtn{
      width:40px;height:40px;border-radius:14px;
      border:1px solid var(--line);
      background:var(--surface2);
      color:var(--text);
      display:grid;place-items:center;
      padding:0;
      cursor:pointer;
      transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
      touch-action:manipulation;
    }
    .iconBtn:active{transform:scale(.98)}
    .iconBtn:hover{border-color:rgba(0,212,255,.45)}
    .iconBtn:focus-visible{
      outline:2px solid rgba(0,212,255,.55);
      outline-offset:2px;
    }

    .drawerBack{
      position:fixed;inset:0;
      background:rgba(0,0,0,.55);
      opacity:0;
      pointer-events:none;
      transition:opacity .22s var(--ease);
      z-index:70;
    }
    .drawer{
      position:fixed;
      left:50%;
      transform:translateX(-50%);
      top:12px;
      width:calc(100% - 24px);
      max-width:var(--max);
      border:1px solid var(--line);
      border-radius:var(--r2);
      overflow:hidden;
      background:var(--surface);
      opacity:0;
      pointer-events:none;
      transition:opacity .22s var(--ease), transform .22s var(--ease);
      z-index:80;
    }
    .drawerOpen .drawerBack{opacity:1; pointer-events:auto}
    .drawerOpen .drawer{
      opacity:1;
      pointer-events:auto;
      transform:translateX(-50%);
    }
    .drawerTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:14px var(--pad);
      border-bottom:1px solid var(--line);
      background:var(--surface2);
    }
    .drawerTop strong{font-size:13px; letter-spacing:.02em}
    .drawerBody{padding:14px var(--pad)}
    .navGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .navItem{
      border:1px solid var(--line);
      background:var(--surface2);
      border-radius:16px;
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
      transition:transform .22s var(--ease), border-color .22s var(--ease);
    }
    .navItem:hover{border-color:rgba(0,212,255,.45); transform:translateY(-1px)}
    .navItem:active{transform:translateY(0)}
    .navItem .mini{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
      color:var(--muted);
      font-size:12px;
    }
    .navItem strong{font-size:13px}
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px;
      border:1px solid rgba(0,212,255,.35);
      background:rgba(0,212,255,.10);
      color:var(--text);
      border-radius:999px;
      font-size:12px;
      letter-spacing:.02em;
      width:max-content;
    }
    .pill i{width:8px;height:8px;border-radius:999px;background:var(--accent);display:inline-block}

    .section{
      padding:18px var(--pad);
      border-bottom:1px solid var(--line);
    }
    .section:last-child{border-bottom:0}

    .hero{
      padding:18px var(--pad) 22px;
      border-bottom:1px solid var(--line);
      background:var(--surface);
    }
    .heroMedia{
      width:100%;
      height:220px;
      border-radius:var(--r2);
      border:1px solid var(--line);
      overflow:hidden;
      background:var(--surface2);
      position:relative;
    }
    .heroMedia canvas{
      width:100%;
      height:100%;
      display:block;
    }
    .heroOverlay{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      padding:14px;
      gap:8px;
      background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
    }
    .heroKicker{
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size:12px;
      color:rgba(244,244,245,.9);
      letter-spacing:.02em;
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .dot{
      width:8px;height:8px;border-radius:999px;background:var(--accent);
      display:inline-block;
    }
    .heroCopy{
      margin-top:14px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .h1{
      margin:0;
      font-size:30px;
      line-height:1.05;
      letter-spacing:-.03em;
    }
    .sub{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.55;
      max-width:44ch;
    }

    .ctaRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:4px;
    }
    .btn{
      border:1px solid var(--line);
      background:var(--surface2);
      color:var(--text);
      border-radius:16px;
      padding:12px 14px;
      font-weight:600;
      font-size:14px;
      display:inline-flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
      touch-action:manipulation;
    }
    .btn:hover{border-color:rgba(0,212,255,.45)}
    .btn:active{transform:scale(.99)}
    .btn:focus-visible{
      outline:2px solid rgba(0,212,255,.55);
      outline-offset:2px;
    }
    .btnPrimary{
      border-color:rgba(0,212,255,.55);
      background:rgba(0,212,255,.12);
    }
    .btnPrimary:hover{
      border-color:rgba(0,212,255,.85);
      transform:scale(1.02);
    }
    .btnPrimary .arrow{
      width:18px;height:18px;border-radius:10px;
      border:1px solid rgba(0,212,255,.55);
      display:grid;place-items:center;
      color:var(--accent);
      background:rgba(0,212,255,.10);
    }

    .grid2{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }

    .capHeader{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }
    .h2{
      margin:0;
      font-size:18px;
      letter-spacing:-.02em;
    }
    .hint{
      margin:0;
      font-size:12px;
      color:var(--muted);
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      white-space:nowrap;
    }

    .card{
      border:1px solid var(--line);
      background:var(--surface2);
      border-radius:var(--r2);
      padding:14px;
      transition:transform .22s var(--ease), border-color .22s var(--ease);
      position:relative;
      overflow:hidden;
    }
    .card:hover{border-color:rgba(0,212,255,.45); transform:translateY(-1px)}
    .card:active{transform:translateY(0)}
    .card:focus-within{
      outline:2px solid rgba(0,212,255,.50);
      outline-offset:2px;
    }

    .capCard{
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .capIcon{
      width:40px;height:40px;border-radius:16px;
      border:1px solid rgba(0,212,255,.45);
      background:rgba(0,212,255,.10);
      color:var(--accent);
      display:grid;place-items:center;
      flex:0 0 auto;
    }
    .capText{min-width:0}
    .capText strong{
      display:block;
      font-size:14px;
      letter-spacing:-.01em;
      margin-bottom:6px;
    }
    .capText p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }
    .miniCode{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .chip{
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size:12px;
      color:rgba(244,244,245,.92);
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      width:max-content;
    }
    .chip b{color:var(--accent); font-weight:600}

    .caseGrid{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }
    .caseMedia{
      height:150px;
      border-radius:18px;
      border:1px solid var(--line);
      overflow:hidden;
      background:#0F0F10;
      position:relative;
    }
    .caseMedia svg{
      width:100%;
      height:100%;
      display:block;
    }
    .caseBody{margin-top:12px; display:flex; flex-direction:column; gap:8px}
    .caseBody strong{font-size:14px; letter-spacing:-.01em}
    .caseBody p{margin:0; color:var(--muted); font-size:13px; line-height:1.55}
    .caseActions{margin-top:4px}
    .linkBtn{
      display:inline-flex; align-items:center; gap:10px;
      font-size:13px;
      font-weight:600;
      color:rgba(244,244,245,.92);
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      transition:transform .22s var(--ease), border-color .22s var(--ease);
      cursor:pointer;
      touch-action:manipulation;
    }
    .linkBtn:hover{border-color:rgba(0,212,255,.45); transform:translateY(-1px)}
    .linkBtn:active{transform:translateY(0)}
    .linkBtn:focus-visible{outline:2px solid rgba(0,212,255,.55); outline-offset:2px}
    .linkBtn .tiny{
      width:18px;height:18px;border-radius:10px;
      border:1px solid rgba(0,212,255,.45);
      display:grid;place-items:center;
      color:var(--accent);
      background:rgba(0,212,255,.10);
    }

    .dashWrap{
      border-radius:var(--r2);
      border:1px solid var(--line);
      background:#0E0E0F;
      overflow:hidden;
    }
    .dashTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 12px;
      border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.02);
    }
    .dashTitle{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .dashTitle strong{
      font-size:13px;
      letter-spacing:-.01em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .dashTitle span{
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .statusPill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:1px solid rgba(0,212,255,.35);
      background:rgba(0,212,255,.10);
      color:rgba(244,244,245,.92);
      border-radius:999px;
      padding:8px 10px;
      font-size:12px;
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      white-space:nowrap;
    }
    .statusPill i{width:8px;height:8px;border-radius:999px;background:var(--accent);display:inline-block}

    .dashBody{padding:12px}
    .metricGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-bottom:12px;
    }
    .metric{
      border:1px solid var(--line);
      background:rgba(255,255,255,.02);
      border-radius:18px;
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:8px;
      min-height:86px;
    }
    .metric .label{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:var(--muted);
      font-size:12px;
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }
    .metric .value{
      font-size:20px;
      font-weight:800;
      letter-spacing:-.02em;
      display:flex;
      align-items:baseline;
      gap:8px;
      line-height:1.0;
    }
    .metric .value small{
      font-size:12px;
      color:var(--muted);
      font-weight:600;
      letter-spacing:0;
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }

    .chartBlock{
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,255,255,.02);
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .chartHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:var(--muted);
      font-size:12px;
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }
    .bars{
      height:76px;
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:1fr;
      gap:6px;
      align-items:end;
    }
    .bar{
      border:1px solid var(--line);
      border-radius:12px;
      background:rgba(255,255,255,.03);
      height:20%;
      position:relative;
      overflow:hidden;
    }
    .bar::after{
      content:"";
      position:absolute; inset:auto 0 0 0;
      height:0%;
      background:rgba(0,212,255,.20);
      transition:height 900ms var(--ease);
    }
    .dashActive .bar::after{height:var(--h,40%)}

    .pipe{
      margin-top:10px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .pipeRow{
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,255,255,.02);
      padding:12px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .pipeTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size:12px;
      color:rgba(244,244,245,.92);
    }
    .pipeTop .name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
    .tag{
      border:1px solid var(--line);
      border-radius:999px;
      padding:6px 10px;
      color:var(--muted);
      background:rgba(255,255,255,.03);
      white-space:nowrap;
    }
    .steps{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:8px;
    }
    .step{
      border-radius:14px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.02);
      padding:10px 10px;
      display:flex;
      flex-direction:column;
      gap:6px;
      min-height:58px;
      transition:border-color .22s var(--ease), transform .22s var(--ease);
    }
    .step:hover{border-color:rgba(0,212,255,.45); transform:translateY(-1px)}
    .step span{
      color:var(--muted);
      font-size:11px;
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }
    .step strong{
      font-size:12px;
      letter-spacing:-.01em;
    }
    .state{
      display:flex; align-items:center; gap:8px;
      margin-top:auto;
      font-size:11px;
      color:rgba(244,244,245,.92);
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }
    .state i{
      width:8px;height:8px;border-radius:999px;background:var(--accent);display:inline-block;
    }
    .state .muted{color:var(--muted)}
    .state.fail i{background:#F87171}
    .state.warn i{background:#FBBF24}

    .tWrap{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .tHead{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .tControls{
      display:flex;
      gap:10px;
    }
    .tBtn{
      width:40px;height:40px;border-radius:14px;
      border:1px solid var(--line);
      background:var(--surface2);
      color:var(--text);
      display:grid;place-items:center;
      cursor:pointer;
      transition:transform .22s var(--ease), border-color .22s var(--ease);
      touch-action:manipulation;
    }
    .tBtn:hover{border-color:rgba(0,212,255,.45); transform:translateY(-1px)}
    .tBtn:active{transform:translateY(0)}
    .tBtn:focus-visible{outline:2px solid rgba(0,212,255,.55); outline-offset:2px}

    .carousel{
      border:1px solid var(--line);
      background:var(--surface2);
      border-radius:var(--r2);
      overflow:hidden;
      position:relative;
    }
    .slides{
      display:flex;
      width:100%;
      transform:translateX(0);
      transition:transform 420ms var(--ease);
    }
    .slide{
      min-width:100%;
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .quoteTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
    }
    .quoteMark{
      width:40px;height:40px;border-radius:16px;
      border:1px solid rgba(0,212,255,.45);
      background:rgba(0,212,255,.10);
      color:var(--accent);
      display:grid;place-items:center;
      flex:0 0 auto;
    }
    blockquote{
      margin:0;
      font-size:14px;
      line-height:1.6;
      color:rgba(244,244,245,.92);
      letter-spacing:-.01em;
    }
    .who{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-top:1px solid var(--line);
      padding-top:12px;
    }
    .who .id{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:0;
    }
    .who strong{
      font-size:13px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .who span{
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    }
    .logoRow{
      display:flex; align-items:center; gap:8px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      border-radius:999px;
      padding:8px 10px;
      color:var(--muted);
      font-size:12px;
      font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      white-space:nowrap;
    }
    .logoRow i{width:8px;height:8px;border-radius:999px;background:rgba(0,212,255,.55);display:inline-block}

    .dots{
      display:flex;
      gap:8px;
      justify-content:center;
      padding:12px;
      border-top:1px solid var(--line);
      background:rgba(255,255,255,.02);
    }
    .dotBtn{
      width:10px;height:10px;border-radius:999px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.06);
      cursor:pointer;
      transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
    }
    .dotBtn[aria-current="true"]{
      border-color:rgba(0,212,255,.65);
      background:rgba(0,212,255,.25);
      transform:scale(1.15);
    }

    .cta{
      padding:18px var(--pad) 22px;
      background:var(--surface);
    }
    .ctaBox{
      border:1px solid rgba(0,212,255,.35);
      background:rgba(0,212,255,.10);
      border-radius:var(--r2);
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .ctaBox h3{
      margin:0;
      font-size:18px;
      letter-spacing:-.02em;
    }
    .ctaBox p{
      margin:0;
      color:rgba(244,244,245,.88);
      font-size:13px;
      line-height:1.6;
    }

    .footer{
      padding:18px var(--pad) 20px;
      color:var(--muted);
      font-size:12px;
      line-height:1.7;
      background:var(--surface);
    }
    .footer b{color:rgba(244,244,245,.92); font-weight:600}
    .footer a{
      color:rgba(244,244,245,.92);
      border-bottom:1px solid rgba(0,212,255,.35);
    }
    .divider{
      height:1px;
      background:var(--line);
      margin:0;
    }

    .reveal{
      opacity:0;
      transform:translateY(10px);
      transition:opacity 520ms var(--ease), transform 520ms var(--ease);
    }
    .reveal.show{
      opacity:1;
      transform:translateY(0);
    }

    @media (min-width:520px){
      .page{padding:18px}
      .metricGrid{grid-template-columns:repeat(4,1fr)}
      .steps{grid-template-columns:repeat(4,1fr)}
      .caseGrid{grid-template-columns:1fr 1fr}
      .grid2{grid-template-columns:1fr 1fr}
      .heroMedia{height:250px}
      .h1{font-size:34px}
    }

    @media (prefers-reduced-motion: reduce){
      *{scroll-behavior:auto !important}
      .slides{transition:none}
      .reveal{transition:none}
      .btn,.iconBtn,.card,.tBtn,.linkBtn,.step{transition:none}
      .bar::after{transition:none}
    }