:root{
    --bg:#070b14;
    --panel:rgba(255,255,255,.06);
    --panel2:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.10);
    --text:#eaf1ff;
    --muted:rgba(234,241,255,.70);
    --btn:#2a6cff;
    --btn2:rgba(255,255,255,.10);
    --ok:#35f2b3;
  }
  
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: radial-gradient(1200px 700px at 20% 0%, rgba(64,110,255,.18), transparent 60%),
                radial-gradient(900px 600px at 80% 20%, rgba(53,242,179,.12), transparent 60%),
                var(--bg);
    color:var(--text);
  }
  
  a{color:inherit;text-decoration:none}
  .container{max-width:1100px;margin:0 auto;padding:22px}
  .section{padding:26px 0}
  .muted{color:var(--muted)}
  .small{font-size:13px}
  .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
  
  .nav{
    position:sticky;top:0;z-index:10;
    backdrop-filter: blur(14px);
    background: rgba(7,11,20,.65);
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 22px;
  }
  .brand{display:flex;gap:12px;align-items:center}
  .logo{
    width:42px;height:42px;border-radius:12px;
    background: linear-gradient(135deg, rgba(42,108,255,.85), rgba(53,242,179,.65));
    display:grid;place-items:center;font-weight:800;
  }
  .brandTitle{font-weight:800}
  .brandSub{font-size:12px;color:var(--muted)}
  .navLinks{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  
  .btn{
    background:var(--btn);
    color:white;
    border:1px solid rgba(255,255,255,.10);
    padding:10px 14px;border-radius:12px;
    font-weight:700;
    display:inline-flex;align-items:center;gap:8px;
    cursor:pointer;
  }
  .btn:hover{filter:brightness(1.06)}
  .btn.ghost{background:var(--btn2)}
  .btn.big{padding:12px 16px;border-radius:14px}
  .btn.sm{padding:7px 10px;border-radius:10px;font-size:13px}
  .btn.full{width:100%;justify-content:center}
  
  .hero{
    display:grid;grid-template-columns: 1.2fr .8fr;
    gap:18px;align-items:center;
    padding:26px 0;
  }
  @media(max-width:980px){.hero{grid-template-columns:1fr}}
  h1{font-size:44px;line-height:1.05;margin:0 0 10px}
  .lead{font-size:16px;color:var(--muted);max-width:700px}
  .ctaRow{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
  
  .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .badge{
    background:rgba(255,255,255,.06);
    border:1px solid var(--border);
    padding:7px 10px;border-radius:999px;
    color:rgba(234,241,255,.85);
    font-size:13px;
  }
  
  .mock{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:18px;
    overflow:hidden;
  }
  .mockTop{
    display:flex;align-items:center;gap:8px;
    padding:12px 14px;
    background:rgba(255,255,255,.05);
    border-bottom:1px solid var(--border);
  }
  .dot{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.25)}
  .mockTitle{margin-left:auto;color:var(--muted);font-size:12px}
  .mockBody{padding:14px;display:grid;gap:10px}
  .stat{
    background:rgba(0,0,0,.25);
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px;
    display:flex;justify-content:space-between;align-items:center;
  }
  .stat .k{color:var(--muted);font-size:13px}
  .stat .v{font-weight:800}
  .stat .v.ok{color:var(--ok)}
  .miniNote{color:var(--muted);font-size:13px;margin-top:4px}
  
  .cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
  }
  @media(max-width:980px){.cards{grid-template-columns:1fr}}
  .card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
  }
  .card h3{margin:0 0 6px}
  .card p{margin:0;color:var(--muted)}
  
  .pricing{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
  }
  @media(max-width:980px){.pricing{grid-template-columns:1fr}}
  .priceCard{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:18px;
    padding:16px;
  }
  .priceCard.highlight{outline:2px solid rgba(42,108,255,.35)}
  .pTitle{font-weight:900;font-size:18px;margin-bottom:8px}
  .pRow{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .pRow:last-child{border-bottom:none}
  
  .faq details{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    padding:14px 14px;
    margin:10px 0;
  }
  .faq summary{cursor:pointer;font-weight:800}
  .faq p{color:var(--muted)}
  
  .footer{
    padding:22px 0;
    border-top:1px solid var(--border);
    color:var(--muted);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  }
  
  .gridBuy{
    display:grid;
    grid-template-columns: .9fr 1.1fr;
    gap:12px;
  }
  @media(max-width:980px){.gridBuy{grid-template-columns:1fr}}
  
  .label{display:block;margin:10px 0 6px;color:rgba(234,241,255,.85);font-weight:700}
  .input{
    width:100%;
    background:rgba(0,0,0,.25);
    border:1px solid var(--border);
    border-radius:12px;
    color:var(--text);
    padding:12px 12px;
    outline:none;
  }
  .input:focus{border-color:rgba(42,108,255,.55)}
  textarea.input{resize:vertical}
  
  .copyBox{
    display:flex;gap:10px;align-items:center;
    background:rgba(0,0,0,.25);
    border:1px solid var(--border);
    padding:10px 12px;border-radius:14px;
    overflow:hidden;
  }
  .copyBox code{word-break:break-all}
  .hr{height:1px;background:rgba(255,255,255,.10);margin:14px 0}