:root{
  --blue:#2E6EF5; --blue2:#4F46E5; --navy:#141F3D; --ink:#1c2438;
  --muted:#5b6478; --line:#e7e9f0; --bg:#ffffff; --card:#f6f7fb;
  --radius:20px; --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
img{max-width:100%}

/* nav */
.nav{display:flex; align-items:center; justify-content:space-between; padding:20px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; color:var(--navy); font-size:20px}
.brand img{width:40px; height:40px; border-radius:10px}
.nav a.navlink{color:var(--muted); font-weight:600; margin-left:22px; font-size:15px}

/* hero */
.hero{position:relative; overflow:hidden; text-align:center; padding:56px 0 72px;
  background:radial-gradient(120% 120% at 50% -10%, #eef2ff 0%, #ffffff 55%);}
.hero .icon{width:132px; height:132px; border-radius:30px; box-shadow:0 18px 50px rgba(46,110,245,.28); margin-bottom:26px}
.hero h1{font-size:clamp(36px,6vw,58px); line-height:1.05; letter-spacing:-.02em; margin:0 0 14px; color:var(--navy); font-weight:800}
.hero p.lead{font-size:clamp(17px,2.4vw,21px); color:var(--muted); max-width:640px; margin:0 auto 30px}
.badges{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--blue); color:#fff; font-weight:700;
  padding:14px 26px; border-radius:999px; font-size:16px; box-shadow:0 10px 24px rgba(46,110,245,.3)}
.btn:hover{text-decoration:none; filter:brightness(1.05)}
.btn.ghost{background:#eef1fb; color:var(--blue); box-shadow:none}
.soon{color:var(--muted); font-size:14px; font-weight:600}

/* features */
.section{padding:64px 0}
.section h2{font-size:clamp(26px,3.5vw,34px); color:var(--navy); letter-spacing:-.02em; text-align:center; margin:0 0 8px; font-weight:800}
.section .sub{color:var(--muted); text-align:center; max-width:600px; margin:0 auto 44px}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.feature{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px}
.feature .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:24px;
  background:linear-gradient(135deg,var(--blue),var(--blue2)); margin-bottom:16px}
.feature h3{margin:0 0 6px; font-size:18px; color:var(--navy)}
.feature p{margin:0; color:var(--muted); font-size:15px}

/* privacy strip */
.strip{background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff; border-radius:28px; padding:48px 32px; text-align:center; margin:8px 0}
.strip h2{color:#fff; margin:0 0 10px}
.strip p{color:#e7ecff; max-width:620px; margin:0 auto; font-size:17px}

/* article (support / privacy) */
.article{padding:56px 0; max-width:760px}
.article h1{font-size:clamp(30px,5vw,42px); color:var(--navy); letter-spacing:-.02em; margin:0 0 8px; font-weight:800}
.article .updated{color:var(--muted); font-size:14px; margin-bottom:34px}
.article h2{color:var(--navy); margin:38px 0 10px; font-size:22px}
.article h3{color:var(--navy); margin:26px 0 6px; font-size:17px}
.article p,.article li{color:var(--ink); font-size:16px}
.article ul{padding-left:20px}
.article .lang{display:inline-block; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 14px; font-size:13px; font-weight:700; color:var(--muted); margin:34px 0 4px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin:16px 0}

/* footer */
footer{border-top:1px solid var(--line); padding:36px 0; margin-top:40px; color:var(--muted); font-size:14px}
.foot{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.foot a{color:var(--muted); font-weight:600; margin-left:20px}
.foot .brand{font-size:16px}
@media(prefers-color-scheme:dark){
  :root{--bg:#0d1017; --ink:#e6e9f2; --navy:#f2f5ff; --muted:#9aa3b8; --line:#232838; --card:#161b26}
  .hero{background:radial-gradient(120% 120% at 50% -10%, #141a2e 0%, #0d1017 55%)}
  .btn.ghost{background:#1a2233}
}