:root { --bg:#fff; --soft:#f2f8f8; --ink:#0b2a3c; --muted:#4f6773; --line:#dbe8e8; --brand:#0b8f8a; --brand-d:#0b6f78; --ok:#12805c; --bad:#c92a2a; --radius:14px; --shadow:0 8px 30px rgba(11,42,60,.09); }
@media (prefers-color-scheme: dark) { :root { --bg:#07161f; --soft:#0c212d; --ink:#e8f4f4; --muted:#9db6bd; --line:#1c3945; --brand:#2dd4cb; --brand-d:#5ae3db; --shadow:0 8px 30px rgba(0,0,0,.4); } .btn.primary { color:#062a2c; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--brand); text-decoration:none; } a:hover { text-decoration:underline; }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
h1,h2,h3 { line-height:1.2; margin:0 0 .5em; } h1 { font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.02em; } h2 { font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.01em; }
p { margin:0 0 1em; } .muted { color:var(--muted); } .center { text-align:center; } .small { font-size:.875rem; }
header.nav { position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav .wrap { display:flex; align-items:center; gap:18px; height:64px; }
.only-sm { display:none; } .brand { white-space:nowrap; font-weight:800; font-size:1.2rem; color:var(--ink); } .brand:hover { text-decoration:none; } .brand i { display:inline-block; flex:none; width:22px; height:22px; border-radius:7px; background:linear-gradient(145deg,#12b5ae,#0b6f78); vertical-align:-7px; margin-inline-end:9px; position:relative; width:30px; height:30px; border-radius:9px; } .brand i::after { content:'C'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font:800 18px/1 system-ui,sans-serif; } .brand span { letter-spacing:-.02em; }
.nav nav { display:flex; gap:18px; margin-inline-start:12px; } .nav nav a { white-space:nowrap; color:var(--muted); font-weight:500; } .nav nav a:hover { color:var(--ink); text-decoration:none; }
.grow { flex:1; }
select.lang { width:auto; background:var(--soft); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 8px; font:inherit; font-size:.9rem; }
.btn { display:inline-block; white-space:nowrap; border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:10px 18px; border-radius:10px; font:inherit; font-weight:600; cursor:pointer; text-align:center; }
.btn:hover { text-decoration:none; border-color:var(--brand); } .btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; } .btn.primary:hover { background:var(--brand-d); }
.btn.lg { padding:14px 26px; font-size:1.05rem; border-radius:12px; } .btn:disabled { opacity:.6; cursor:default; }
.hero { padding:72px 0 56px; background:radial-gradient(1000px 420px at 50% -10%, color-mix(in srgb,var(--brand) 20%,transparent), transparent), radial-gradient(600px 300px at 90% 10%, color-mix(in srgb,#0b2a3c 8%,transparent), transparent); }
.hero p.lead { font-size:1.2rem; color:var(--muted); max-width:680px; margin:0 auto 28px; } .hero .row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
section { padding:64px 0; } section.alt { background:var(--soft); } .sub { color:var(--muted); max-width:620px; margin:0 auto 36px; }
.grid { display:grid; gap:18px; } .g4 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .g3 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.card { background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:22px; } section.alt .card { background:var(--bg); }
.card h3 { font-size:1.08rem; margin-bottom:.35em; } .card p { color:var(--muted); margin:0; font-size:.95rem; }
.ico { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:21px; background:color-mix(in srgb,var(--brand) 14%,transparent); margin-bottom:12px; }
.demo { display:grid; grid-template-columns:1fr; gap:18px; } .frame { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--bg); }
.frame .bar { background:var(--soft); padding:9px 14px; display:flex; gap:6px; align-items:center; border-bottom:1px solid var(--line); } .frame .bar span { width:10px; height:10px; border-radius:50%; background:var(--line); }
.frame .stage { height:min(70vh,640px); display:grid; place-items:center; text-align:center; padding:24px; background:var(--soft); } .frame iframe { width:100%; height:min(70vh,640px); border:0; display:block; }
.creds { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; margin-top:14px; } .creds code { background:var(--soft); border:1px solid var(--line); padding:3px 9px; border-radius:7px; user-select:all; }
.plans { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); align-items:stretch; }
.plan { display:flex; flex-direction:column; position:relative; } .plan.pop { border-color:var(--brand); box-shadow:var(--shadow); }
.plan .tag { position:absolute; top:-12px; inset-inline-start:20px; background:var(--brand); color:#fff; font-size:.75rem; font-weight:700; padding:3px 10px; border-radius:99px; }
.plan .price { font-size:2.3rem; font-weight:800; margin:6px 0 2px; } .plan .price small { font-size:.9rem; font-weight:500; color:var(--muted); }
.plan ul { list-style:none; padding:0; margin:14px 0 20px; flex:1; } .plan li { padding:5px 0; font-size:.93rem; display:flex; gap:8px; } .plan li::before { content:"✓"; color:var(--ok); font-weight:800; }
.steps { counter-reset:s; } .steps .card { position:relative; } .steps .card::before { counter-increment:s; content:counter(s); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--brand); color:#fff; font-weight:700; margin-bottom:10px; }
details { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px; } summary { cursor:pointer; font-weight:600; } details p { margin:10px 0 0; color:var(--muted); }
.cta { background:linear-gradient(135deg,#0e9f9a 0%,#0b6f78 55%,#0b2a3c 100%); color:#fff; border-radius:20px; padding:44px 24px; } .cta .btn { background:#fff; color:var(--brand); border-color:#fff; } .cta p { opacity:.9; }
footer { border-top:1px solid var(--line); padding:28px 0; color:var(--muted); font-size:.9rem; } footer .wrap { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
/* auth pages */
.auth { min-height:calc(100vh - 64px); display:grid; place-items:center; padding:36px 16px; background:var(--soft); }
.panel { width:100%; max-width:480px; background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:var(--shadow); } .panel.wide { max-width:620px; }
label.f { display:block; font-weight:600; font-size:.9rem; margin:14px 0 5px; } .hint { font-weight:400; color:var(--muted); font-size:.82rem; }
input, select, textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font:inherit; } textarea { min-height:90px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent); border-color:var(--brand); }
.suffix { display:flex; align-items:stretch; direction:ltr; } .suffix input { border-start-end-radius:0; border-end-end-radius:0; text-align:left; } .suffix span { display:grid; place-items:center; padding:0 12px; background:var(--soft); border:1px solid var(--line); border-inline-start:0; border-radius:0 10px 10px 0; color:var(--muted); font-size:.9rem; white-space:nowrap; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:560px) { .row2 { grid-template-columns:1fr; } .panel { padding:22px 18px; } }
.err { color:var(--bad); font-size:.9rem; min-height:1.2em; margin-top:10px; } .check { display:flex; gap:10px; align-items:flex-start; margin-top:14px; font-size:.92rem; } .check input { width:auto; margin-top:4px; }
.hp { position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; } .done { text-align:center; } .done .big { font-size:48px; }
@media (max-width:920px) {
  .hide-sm { display:none; } .only-sm { display:inline !important; }
  .nav .wrap { flex-wrap:wrap; height:auto; gap:8px 10px; padding-top:10px; padding-bottom:0; }
  .nav nav { order:3; width:100%; margin:0; gap:15px; font-size:.92rem; padding:8px 0 10px; border-top:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
}
@media (max-width:760px) {
  .hero { padding:44px 0 36px; } section { padding:44px 0; } .cta { padding:32px 18px; border-radius:16px; }
  .btn.lg { padding:13px 20px; } .plan .price { font-size:2rem; }
}
@media (max-width:380px) { .wrap { padding:0 14px; } .btn { padding:9px 14px; } select.lang { max-width:96px; } }

.ts { text-align:start; } .mt14 { margin-top:14px; } .mt16 { margin-top:16px; } .mt18 { margin-top:18px; } .h1s { font-size:1.8rem; } .full { width:100%; margin-top:8px; } .w760 { max-width:760px; } hr.sep { border:0; border-top:1px solid var(--line); margin:18px 0; }
[hidden] { display:none !important; }

.addons { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .addon .plus { font-size:1.4rem; font-weight:800; margin-top:10px; } .addon .plus small { font-size:.85rem; font-weight:500; color:var(--muted); }
.chip { display:inline-block; margin-inline-start:8px; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--soft); color:var(--muted); vertical-align:middle; }
.plan li.strong { font-weight:700; } .addon-pick .opt { display:flex; gap:8px; align-items:center; padding:5px 0; font-size:.93rem; } .addon-pick .opt input { width:auto; } .addon-pick .off { opacity:.5; }
.total { margin-top:12px; font-weight:700; } .plans { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); max-width:760px; margin-inline:auto; }