:root{--bg:#0b1020;--panel:#141f3a;--inset:#080d18;--line:#26324f;--text:#eef1fa;--muted:#8b97b5;--amber:#f5b942;--teal:#56d6c1;--blue:#4aa3ff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.5 -apple-system,system-ui,Segoe UI,Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit}
.top{display:flex;justify-content:space-between;align-items:center;padding:18px clamp(16px,4vw,40px)}
.brand{font-weight:700;font-size:19px}.plain{text-decoration:none}.by{font-weight:400;font-size:15px;color:var(--muted)}.by a{color:var(--muted)}.by a:hover{color:var(--text)}
.login{text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:8px 18px;font-weight:600;font-size:15px}
.login:hover{background:var(--panel)}
main{flex:1;padding:16px clamp(16px,4vw,40px) 40px}
.hero{max-width:1100px;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:32px;padding:clamp(24px,5vw,64px);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,64px);align-items:center}
.cards{display:grid;gap:14px}
.pc{background:var(--inset);border:1px solid var(--line);border-radius:22px;padding:18px 22px}
.pc .row{display:flex;justify-content:space-between;color:var(--muted);font-size:15px}
.pc .name{font-weight:650;font-size:19px;margin:6px 0 14px}
.bar{height:7px;background:#161d2e;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--blue))}
.tag{display:flex;align-items:center;gap:10px;color:var(--amber);font-weight:700;letter-spacing:.18em;font-size:14px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--amber)}
h1{font-size:clamp(38px,6vw,56px);line-height:1.05;margin:18px 0 14px;letter-spacing:-.02em}
.lead{color:var(--muted);font-size:19px;margin:0 0 24px}
.ticks{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px}
.ticks li{display:flex;align-items:center;gap:14px}
.ticks li:before{content:"\2713";flex:none;width:34px;height:34px;border-radius:50%;background:#1b3042;color:var(--teal);display:grid;place-items:center;font-size:15px;font-weight:700}
.btn{display:inline-block;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:14px 22px;font-weight:600;background:#10192f}
.btn:hover{background:#18233f}
.site-footer{padding:22px clamp(16px,4vw,40px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.site-footer nav{display:flex;gap:18px}.site-footer a{color:var(--muted);text-decoration:none}.site-footer a:hover{color:var(--text)}
@media(max-width:820px){.hero{grid-template-columns:1fr;border-radius:24px}}

/* Sections below the hero share the hero's rounded panel look */
.panel{max-width:1100px;margin:22px auto 0;background:var(--panel);border:1px solid var(--line);border-radius:32px;padding:clamp(24px,5vw,56px)}
.panel .tag{margin-bottom:6px}
.panel h2{font-size:clamp(28px,4.4vw,40px);line-height:1.1;margin:10px 0 12px;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:19px;margin:0 0 30px;max-width:680px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plan{background:var(--inset);border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,30px);display:flex;flex-direction:column}
.plan.hot{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset,0 18px 50px -24px rgba(86,214,193,.45)}
.plan .name{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:650;font-size:19px;margin:0 0 4px}
.badge{font-size:12px;font-weight:700;letter-spacing:.12em;color:#06201b;background:var(--teal);border-radius:99px;padding:4px 10px}
.price{font-size:44px;font-weight:700;letter-spacing:-.02em;margin:4px 0 18px}.price span{font-size:17px;font-weight:400;color:var(--muted);letter-spacing:0}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.plan li{display:flex;gap:14px;align-items:flex-start}
.plan li:before{content:"\2713";flex:none;width:28px;height:28px;border-radius:50%;background:#1b3042;color:var(--teal);display:grid;place-items:center;font-size:13px;font-weight:700;margin-top:1px}
.plan li b{font-weight:650}
.fine{color:var(--muted);font-size:14px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid3>div{background:var(--inset);border:1px solid var(--line);border-radius:22px;padding:22px}
.grid3 h3{margin:0 0 8px;font-size:18px}.grid3 p{margin:0;color:var(--muted)}
.more{margin:22px 0 0}.more a{color:var(--teal);font-weight:600}
@media(max-width:820px){.grid,.grid3{grid-template-columns:1fr}}

.panel#everywhere .grid3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.panel#everywhere .grid3{grid-template-columns:1fr}}