:root{
      --bg: #0b1020;
      --bg2:#0f172a;
      --card: rgba(255,255,255,.08);
      --card2: rgba(255,255,255,.06);
      --text:#eaf0ff;
      --muted: rgba(234,240,255,.72);
      --line: rgba(234,240,255,.14);
      --shadow: 0 10px 22px rgba(0,0,0,.25);
      --radius: 18px;
      --radius2: 14px;
      --container: 1100px;
      --pad: 18px;

      --gradA: linear-gradient(135deg,#7c3aed 0%, #22c55e 50%, #06b6d4 100%);
      --gradB: linear-gradient(135deg,#60a5fa 0%, #a78bfa 45%, #34d399 100%);
      --accent:#7c3aed;
      --accent2:#06b6d4;

      --focus: 0 0 0 3px rgba(56,189,248,.35), 0 0 0 6px rgba(124,58,237,.25);
      --tap: 44px;
    }
    html[data-theme="light"]{
      --bg: #f7f8ff;
      --bg2:#ffffff;
      --card: rgba(15,23,42,.06);
      --card2: rgba(15,23,42,.045);
      --text:#0b1220;
      --muted: rgba(11,18,32,.72);
      --line: rgba(11,18,32,.12);
      --shadow: 0 10px 22px rgba(2,8,23,.12);
      --accent:#6d28d9;
      --accent2:#0891b2;
      --focus: 0 0 0 3px rgba(8,145,178,.25), 0 0 0 6px rgba(109,40,217,.18);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background:
        radial-gradient(900px 500px at 20% 0%, rgba(124,58,237,.22), transparent 60%),
        radial-gradient(800px 500px at 85% 10%, rgba(6,182,212,.18), transparent 60%),
        radial-gradient(700px 450px at 60% 90%, rgba(34,197,94,.16), transparent 65%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
      color:var(--text);
      line-height:1.6;
      overflow-x:hidden;
      -webkit-text-size-adjust:100%;
      text-rendering:optimizeLegibility;
    }

    a{color:inherit}
    .container{
      width:min(var(--container), 100%);
      margin:0 auto;
      padding:0 var(--pad);
    }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:50;
      padding:10px 0;
      backdrop-filter:saturate(120%);
    }
    .hdr{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:10px 12px;
      border:1px solid var(--line);
      border-radius:999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      box-shadow: var(--shadow);
    }
    html[data-theme="light"] .hdr{
      background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 0;
    }
    .logo{
      width:34px;height:34px;
      border-radius:12px;
      background: var(--gradA);
      box-shadow: 0 8px 18px rgba(124,58,237,.25);
      flex:0 0 auto;
      position:relative;
    }
    .logo::after{
      content:"";
      position:absolute;
      inset:9px;
      border-radius:9px;
      background: rgba(255,255,255,.25);
      transform: rotate(12deg);
    }
    .brand strong{
      font-size:14px;
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 220px;
    }

    nav{
      display:flex;
      align-items:center;
      gap:6px;
      flex-wrap:wrap;
      justify-content:center;
    }
    .navbtn, .btn{
      appearance:none;
      border:1px solid var(--line);
      background: var(--card2);
      color:var(--text);
      height: var(--tap);
      padding:0 12px;
      border-radius:999px;
      font-weight:650;
      letter-spacing:.2px;
      cursor:pointer;
      transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      user-select:none;
      touch-action:manipulation;
      -webkit-tap-highlight-color: transparent;
      text-decoration:none;
    }
    .navbtn:hover, .btn:hover{transform: translateY(-1px)}
    .navbtn:active, .btn:active{transform: translateY(0)}
    .navbtn:focus-visible, .btn:focus-visible, .iconbtn:focus-visible, .faqbtn:focus-visible, .btnPrimary:focus-visible, .dlBtn:focus-visible{
      outline:none;
      box-shadow: var(--focus);
    }
    .cta{
      border-color: rgba(124,58,237,.35);
      background: var(--gradB);
      color:#081018;
      font-weight:800;
    }
    html[data-theme="light"] .cta{color:#06111b}
    .cta span{filter: none}
    .iconbtn{
      width: var(--tap);
      height: var(--tap);
      border-radius:999px;
      border:1px solid var(--line);
      background: var(--card2);
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
    }
    .iconbtn svg{width:18px;height:18px;opacity:.92}

    /* Hero */
    .hero{
      padding:24px 0 10px;
    }
    .heroCard{
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    html[data-theme="light"] .heroCard{
      background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
    }
    .heroInner{
      padding: 22px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:18px;
      align-items:center;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background: var(--card2);
      font-weight:750;
      font-size:12px;
      letter-spacing:.25px;
      width:fit-content;
    }
    .dot{
      width:10px;height:10px;border-radius:999px;
      background: var(--gradA);
      box-shadow: 0 8px 16px rgba(6,182,212,.25);
    }
    h1{
      margin:10px 0 10px;
      line-height:1.15;
      font-size: clamp(26px, 3vw, 40px);
      letter-spacing: -.4px;
    }
    .lead{
      margin:0;
      color:var(--muted);
      font-size: 15.5px;
      max-width: 65ch;
    }
    .heroActions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:14px;
    }
    .btnPrimary{
      border: none;
      background: var(--gradA);
      color:#071018;
      font-weight:900;
      padding:0 14px;
      height: var(--tap);
      border-radius:999px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      text-decoration:none;
    }
    .btnPrimary svg{width:18px;height:18px}
    .btnGhost{
      background: transparent;
      border:1px solid var(--line);
      color:var(--text);
    }
    .heroAside{
      border:1px solid var(--line);
      background: var(--card2);
      border-radius: var(--radius2);
      padding:14px;
    }
    .heroAside h2{
      margin:0 0 8px;
      font-size: 15px;
      letter-spacing:.2px;
    }
    .kvs{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    .kv{
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border-radius: 14px;
      padding:10px;
      min-height: 56px;
    }
    html[data-theme="light"] .kv{
      background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
    }
    .kv b{display:block;font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.25px}
    .kv span{display:block;font-weight:900;margin-top:2px}

    /* Content */
    main{padding: 8px 0 24px}
    section{
      padding: 18px 0;
    }
    .card{
      border:1px solid var(--line);
      background: rgba(255,255,255,.05);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    html[data-theme="light"] .card{
      background: rgba(255,255,255,.82);
    }
    .content{
      padding: 18px 18px 8px;
    }
    .content p, .content li{color:var(--text)}
    .content p{margin: 0 0 14px}
    .content .muted{color:var(--muted)}
    h2{
      margin: 0 0 10px;
      font-size: clamp(18px, 2.3vw, 24px);
      letter-spacing: -.2px;
      line-height:1.25;
    }
    h3{
      margin: 16px 0 8px;
      font-size: 16px;
      letter-spacing: -.1px;
      line-height:1.3;
    }
    .split{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      padding: 0 18px 18px;
    }
    .panel{
      border:1px solid var(--line);
      background: var(--card2);
      border-radius: var(--radius2);
      padding:14px;
      min-width:0;
    }
    .panel ul{padding-left: 18px; margin: 8px 0 0}
    .panel li{margin: 6px 0; color: var(--muted)}
    .panel a{color: inherit}
    .tableWrap{overflow:auto; border-radius: 14px; border:1px solid var(--line); background: rgba(255,255,255,.04)}
    html[data-theme="light"] .tableWrap{background: rgba(255,255,255,.72)}
    table{border-collapse:collapse; width:100%; min-width: 520px}
    th, td{
      padding:10px 12px;
      text-align:left;
      border-bottom:1px solid var(--line);
      vertical-align:top;
      font-size: 14px;
    }
    th{
      font-weight:900;
      letter-spacing:.2px;
      color: var(--text);
      background: linear-gradient(135deg, rgba(124,58,237,.16), rgba(6,182,212,.10));
    }
    td{color: var(--muted)}
    tr:last-child td{border-bottom:0}

    /* FAQ */
    .faqWrap{padding: 10px 18px 18px}
    .faqItem{
      border:1px solid var(--line);
      background: var(--card2);
      border-radius: 14px;
      overflow:hidden;
      margin: 10px 0;
    }
    .faqbtn{
      width:100%;
      text-align:left;
      border:0;
      background: transparent;
      color: var(--text);
      padding: 14px 14px;
      min-height: var(--tap);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-weight:900;
      letter-spacing:.15px;
    }
    .faqIcon{
      width:34px;
      height:34px;
      border-radius: 12px;
      border:1px solid var(--line);
      display:grid;
      place-items:center;
      background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(6,182,212,.12));
      flex:0 0 auto;
      font-size:18px;
      line-height:1;
    }
    .faqPanel{
      padding: 0 14px 14px;
      color: var(--muted);
    }
    .faqPanel[hidden]{display:none}

    /* Download */
    .downloadBar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 14px 18px;
      border-top:1px solid var(--line);
      background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(34,197,94,.08), rgba(6,182,212,.10));
    }
    .dlText{
      min-width:0;
    }
    .dlText b{display:block; font-size:14px}
    .dlText span{display:block; color: var(--muted); font-size: 13.5px}

    .dlBtn{
      border:0;
      background: var(--gradA);
      color:#071018;
      font-weight:950;
      height: var(--tap);
      padding: 0 14px;
      border-radius: 999px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      white-space:nowrap;
      text-decoration:none;
    }

    /* Footer */
    footer{
      height:70px;
      display:flex;
      align-items:center;
      background: linear-gradient(90deg, rgba(124,58,237,.92), rgba(6,182,212,.86), rgba(34,197,94,.86));
      color:#061018;
    }
    .ftr{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .social{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .social a{
      width:40px;height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius: 999px;
      background: rgba(255,255,255,.26);
      border:1px solid rgba(255,255,255,.35);
      text-decoration:none;
    }
    .social a:focus-visible{outline:none; box-shadow: 0 0 0 3px rgba(255,255,255,.35)}
    .social svg{width:18px;height:18px}
    .copy{
      font-weight:900;
      letter-spacing:.2px;
      font-size: 13px;
      text-align:right;
    }

    /* Utility */
    .sr-only{
      position:absolute !important;
      width:1px;height:1px;
      padding:0;margin:-1px;
      overflow:hidden;clip:rect(0,0,0,0);
      white-space:nowrap;border:0;
    }

    /* Responsive */
    @media (max-width: 940px){
      .heroInner{grid-template-columns: 1fr}
      .brand strong{max-width: 160px}
      nav{display:none}
      .kvs{grid-template-columns: 1fr 1fr}
    }
    @media (max-width: 680px){
      :root{--pad: 14px}
      .split{grid-template-columns: 1fr}
      .kvs{grid-template-columns: 1fr 1fr}
      .heroInner{padding: 18px}
      .content{padding: 16px 16px 8px}
      .faqWrap{padding: 8px 16px 16px}
      .downloadBar{padding: 12px 16px}
      .brand strong{max-width: 140px}
    }
    @media (max-width: 420px){
      .kvs{grid-template-columns: 1fr}
      .cta{display:none}
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      .navbtn, .btn{transition:none}
    }