:root{
    --bg:#0a0e17; --bg2:#0d131f; --surface:#111a29; --line:#1e2a3d;
    --text:#d6deeb; --muted:#8593a8; --dim:#5d6b82;
    --accent:#31d0b4; --accent-dim:#1c8f7c; --accent-soft:rgba(49,208,180,.12);
    --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --maxw:1080px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
  header,main,footer{position:relative;z-index:1}
  .wm{position:fixed;right:2vmin;bottom:1vmin;width:50vmin;height:50vmin;background:url(logos/mark.svg) center/contain no-repeat;opacity:.07;z-index:0;pointer-events:none}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .mono{font-family:var(--mono)}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
  h1,h2,h3{line-height:1.15;margin:0;font-weight:650;letter-spacing:-.01em}
  h1{font-size:clamp(2rem,5vw,3.4rem)}
  h2{font-size:clamp(1.5rem,3.4vw,2.2rem)}
  p{color:var(--muted)}
  .btn{display:inline-block;font-family:var(--mono);font-size:14px;padding:12px 20px;border-radius:8px;border:1px solid var(--line);transition:.15s;cursor:pointer}
  .btn:hover{border-color:var(--accent-dim);color:#fff}
  .btn-primary{background:var(--accent-soft);border-color:var(--accent-dim);color:#eafff9}
  .btn-primary:hover{background:rgba(49,208,180,.2);color:#fff}

  /* header */
  header{position:sticky;top:0;z-index:20;background:rgba(10,14,23,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;font-family:var(--mono);font-weight:600;letter-spacing:.02em;font-size:1.15rem}
  .brand .grid{width:42px;height:42px;flex:none;margin-right:12px}
  .brand b{color:#fff}.brand span{color:var(--accent)}
  .flags{display:inline-flex;gap:7px;align-items:center;margin-left:4px}
  .flags a{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;line-height:0;opacity:.5;transition:.15s}
  .flags a:hover{opacity:.9}
  .flags a.active{opacity:1;border-color:var(--teal)}
  .flags img{height:16px;width:auto;display:block}
  .navlinks{display:flex;gap:26px;align-items:center;font-size:14px;color:var(--muted)}
  .navlinks a:hover{color:#fff}
  .navlinks .btn{padding:8px 14px}
  @media(max-width:720px){.navlinks a:not(.btn){display:none}.flags a{display:inline-flex}}

  /* hero */
  .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
  .hero .wrap{padding-top:96px;padding-bottom:104px}
  .hexbg{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);font-size:12px;line-height:1.9;color:#fff;opacity:.03;white-space:pre;overflow:hidden;user-select:none}
  .hero-inner{position:relative;max-width:760px}
  .hero h1{margin:18px 0 20px}
  .hero h1 .hl{color:#fff;border-bottom:2px solid var(--accent-dim)}
  .hero p.lead{font-size:1.15rem;color:#aab6c9;max-width:640px}
  .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
  .assure{margin-top:22px;font-family:var(--mono);font-size:12.5px;color:var(--dim)}
  .assure b{color:var(--accent)}

  section{padding:84px 0;border-bottom:1px solid var(--line)}
  .sec-label{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.15em;text-transform:uppercase;margin-bottom:14px}
  .lead2{max-width:620px;margin-top:14px}

  .grid3{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}
  @media(max-width:720px){.grid3{grid-template-columns:1fr}}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;transition:.15s}
  .card:hover{border-color:var(--accent-dim)}
  .card .k{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:10px}
  .card h3{font-size:1.12rem;margin-bottom:8px;color:#fff}
  .card p{margin:0;font-size:.96rem}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px;counter-reset:s}
  @media(max-width:720px){.steps{grid-template-columns:1fr}}
  .step{position:relative;padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
  .step .n{font-family:var(--mono);color:var(--accent);font-size:13px}
  .step h3{font-size:1.05rem;margin:8px 0;color:#fff}
  .step p{margin:0;font-size:.94rem}

  .flow{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 34px;margin-top:26px}
  @media(max-width:720px){.flow{grid-template-columns:1fr}}
  .flow .it{padding:18px 0;border-top:1px solid var(--line)}
  .flow .it .n{font-family:var(--mono);color:var(--accent);font-size:12px;letter-spacing:.06em}
  .flow .it h4{margin:7px 0 4px;color:#fff;font-size:1rem;font-weight:600}
  .flow .it p{margin:0;font-size:.93rem}

  .why{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;margin-top:40px}
  @media(max-width:720px){.why{grid-template-columns:1fr}}
  .why .row{padding:18px 0;border-top:1px solid var(--line)}
  .why .row h3{font-size:1.02rem;color:#fff;margin-bottom:6px;display:flex;align-items:center;gap:10px}
  .why .row h3::before{content:"›";color:var(--accent);font-family:var(--mono)}
  .why .row p{margin:0;font-size:.95rem}
  .honest{margin-top:36px;padding:20px 24px;border-left:3px solid var(--accent-dim);background:var(--accent-soft);border-radius:0 10px 10px 0;color:#cfe;font-size:1.02rem}

  .challenge{background:linear-gradient(180deg,var(--bg2),var(--bg));text-align:center}
  .challenge .box{max-width:680px;margin:0 auto}
  .challenge h2{color:#fff}
  .challenge .tag{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.15em;text-transform:uppercase}

  .contact{text-align:center}
  .contact .box{max-width:640px;margin:0 auto}
  .contact h2{color:#fff;margin-bottom:14px}
  .mailbtn{margin-top:28px;font-size:15px}

  footer{padding:40px 0;color:var(--dim);font-family:var(--mono);font-size:12.5px}
  .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
  .foot a:hover{color:var(--muted)}

  /* pricing */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
  @media(max-width:820px){.tiers{grid-template-columns:1fr}}
  .tier{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px}
  .tier.featured{border-color:var(--accent-dim);box-shadow:0 0 0 1px var(--accent-dim),0 18px 50px -28px var(--accent)}
  .tier .k{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:8px}
  .tier h3{font-size:1.15rem;color:#fff;margin-bottom:10px}
  .price{font-family:var(--mono);font-size:1.5rem;color:#fff}
  .price span{font-size:.8rem;color:var(--dim)}
  .tier ul{list-style:none;padding:0;margin:16px 0 22px;flex:1}
  .tier li{position:relative;padding-left:20px;font-size:.92rem;color:var(--muted);margin:9px 0}
  .tier li::before{content:"\203A";position:absolute;left:0;color:var(--accent);font-family:var(--mono)}
  .tier .btn{width:100%;text-align:center}
  .price-note{text-align:center;margin-top:28px;color:var(--dim);font-family:var(--mono);font-size:13px}

  /* --- forms / contact page --- */
  .page{padding-top:60px;padding-bottom:88px}
  .page .wrap{max-width:720px}
  .form-head{margin-bottom:34px}
  .form-head h1{font-size:clamp(1.7rem,4vw,2.6rem);margin:14px 0 12px}
  form.contact-form{margin-top:8px}
  .field{margin-bottom:18px}
  .field label{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em;margin-bottom:7px}
  .field label .req{color:var(--accent)}
  .field input,.field select,.field textarea{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--text);font-family:var(--sans);font-size:15px;padding:12px 14px;transition:.15s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-dim);box-shadow:0 0 0 3px var(--accent-soft)}
  .field input.invalid,.field select.invalid,.field textarea.invalid,
  .field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:#ff5b5b}
  .field input.invalid:focus,.field select.invalid:focus,.field textarea.invalid:focus,
  .field input:user-invalid:focus,.field textarea:user-invalid:focus{border-color:#ff5b5b;box-shadow:0 0 0 3px rgba(255,91,91,.18)}
  .field textarea{min-height:150px;resize:vertical}
  .field .hint{font-size:12px;color:var(--dim);margin-top:6px}
  .msg-count{font-family:var(--mono);font-size:12px;margin-top:6px;color:var(--muted)}
  .msg-count.short{color:#ff5b5b}
  .msg-count.ok{color:var(--accent)}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:560px){.row2{grid-template-columns:1fr}}
  .form-actions{margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .cf-slot{margin:22px 0 6px;min-height:0}
  .form-note{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:20px;line-height:1.7}
  .form-note a{color:var(--accent)}

  /* faq */
  .faq{margin-top:40px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--line)}
  .faq summary{cursor:pointer;list-style:none;padding:20px 42px 20px 0;position:relative;color:#fff;font-weight:600;font-size:1.02rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";position:absolute;right:8px;top:16px;color:var(--accent);font-family:var(--mono);font-size:1.4rem;transition:.2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{margin:0 0 20px;color:var(--muted);font-size:.96rem;max-width:780px}
  .faq details p a{color:var(--accent)}

  /* collapsible "curtain" (contact page: PGP / qTox) */
  .disclose{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0}
  .disclose>summary{cursor:pointer;list-style:none;padding:16px 42px 16px 0;position:relative;color:#fff;font-weight:600;font-size:.98rem}
  .disclose>summary::-webkit-details-marker{display:none}
  .disclose>summary::after{content:"+";position:absolute;right:8px;top:12px;color:var(--accent);font-family:var(--mono);font-size:1.5rem;transition:.2s}
  .disclose[open]>summary::after{transform:rotate(45deg)}

  /* tools grid */
  .tools-wrap{margin-top:56px;border-top:1px solid var(--line);padding-top:36px}
  .tools-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
  .tool{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px 16px;background:rgba(255,255,255,.02)}
  .tool .ic{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:7px;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:700}
  .tool .nm{font-family:var(--mono);font-size:14px;color:#dfe;line-height:1.3}
  .tool .nm small{display:block;color:var(--muted);font-size:11px}

  /* terms-agree checkbox on the contact form */
  .agree-field{margin-top:4px}
  .agree{display:flex;gap:10px;align-items:flex-start;font-weight:400;cursor:pointer;color:var(--muted);font-size:14px;line-height:1.5}
  .agree input{width:auto;flex:none;margin:2px 0 0;padding:0;accent-color:var(--accent)}
  .agree a{color:var(--accent)}

  /* disabled button */
  .btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

  /* legal / prose pages */
  .legal{padding-top:56px;padding-bottom:84px}
  .legal .wrap{max-width:760px}
  .legal .updated{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:8px}
  .legal h2{font-size:1.12rem;color:#fff;margin:34px 0 10px}
  .legal p,.legal li{color:var(--muted);font-size:.97rem}
  .legal ul{padding-left:20px;margin:10px 0}
  .legal li{margin:7px 0}
  .legal a{color:var(--accent)}
  .nocookie{font-family:var(--mono);font-size:12px;color:var(--dim)}

  /* maintenance */
  .maint{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
  .maint .box{max-width:520px}
  .maint .logo{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:600;margin-bottom:26px}
  .maint .logo{font-size:1.4rem}
  .maint .logo .grid{width:60px;height:60px;flex:none;margin-right:10px}
  .footco{display:inline-flex;align-items:center;gap:8px}
  .footco img{flex:none}
  .maint h1{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:14px}
  .maint p{color:var(--muted)}
  .maint .tag{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}