:root{
  --bg: #f7fafc;
  --surface: #ffffff;
  --text: #0b1b2b;
  --muted: #506070;
  --line: #e6eef5;

  /* Palette inspired by your icon */
  --blue: #0a7cc6;
  --teal: #18a7a1;
  --green: #2fa84f;
  --amber: #f2b705;

  --radius: 18px;
  --shadow: 0 10px 30px rgba(14, 35, 58, 0.08);
  --max: 1080px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text); background: radial-gradient(1100px 700px at 70% 10%, rgba(10,124,198,0.12), transparent 55%), radial-gradient(900px 650px at 20% 35%, rgba(47,168,79,0.10), transparent 55%), var(--bg); }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ max-width:var(--max); margin:0 auto; padding: 26px 18px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.pill{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line); background:rgba(255,255,255,0.85); padding:8px 12px; border-radius:999px; font-size:14px; color:var(--muted); }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }

.navbar{ position:sticky; top:0; backdrop-filter: blur(10px); background: rgba(247,250,252,0.7); border-bottom:1px solid rgba(230,238,245,0.8); z-index:50; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:650; }
.brand img{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:#fff; }
.nav-links{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.nav-links a{ font-size:14px; color:#24384f; padding:8px 10px; border-radius:10px; }
.nav-links a.active{ background:rgba(10,124,198,0.10); border:1px solid rgba(10,124,198,0.18); }

.nav-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.badge{ display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(10,124,198,0.18); background:rgba(10,124,198,0.08); color:#123a57; padding:8px 12px; border-radius:999px; font-size:13px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:14px; font-weight:650; border:1px solid var(--line); background:#fff; cursor:pointer; }
.btn-primary{ background: linear-gradient(135deg, var(--green), var(--teal)); color:#fff; border:0; }
.btn-secondary{ background: #0b1b2b; color:#fff; border:0; }
.btn:active{ transform: translateY(1px); }

.hero{ padding: 40px 0 10px; }
.h1{ font-size: 54px; line-height: 1.02; letter-spacing:-0.02em; margin: 14px 0; }
.lead{ font-size: 18px; color: var(--muted); max-width: 820px; line-height: 1.55; }
.small{ font-size: 14px; color: var(--muted); line-height:1.55; }

.grid{ display:grid; gap:18px; }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){
  .h1{ font-size: 42px; }
  .grid-2,.grid-3{ grid-template-columns: 1fr; }
  .nav-inner{ align-items:flex-start; }
}

.section{ padding: 26px 0; }
.section h2{ font-size: 28px; margin: 0 0 10px; letter-spacing:-0.01em; }
.section p{ margin: 0 0 12px; color: var(--muted); line-height:1.6; }

.feature{ padding:18px; }
.feature h3{ margin:0 0 8px; font-size: 18px; }
.feature p{ margin:0; color:var(--muted); line-height:1.6; }

.notice{ padding:16px 18px; border-radius: var(--radius); border:1px solid rgba(242,183,5,0.30); background: rgba(242,183,5,0.10); color:#503b00; }
.footer{ margin-top: 40px; padding: 24px 0; border-top: 1px solid rgba(230,238,245,0.9); color: var(--muted); font-size: 13px; line-height:1.6; }
.kv{ display:flex; flex-direction:column; gap:6px; }
.kv b{ color: var(--text); }

.accordion{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background:#fff; }
.accordion details{ border-top:1px solid var(--line); padding:14px 16px; }
.accordion details:first-child{ border-top:0; }
.accordion summary{ cursor:pointer; font-weight:650; list-style:none; }
.accordion summary::-webkit-details-marker{ display:none; }
.accordion p{ margin:10px 0 0; color:var(--muted); }

.lang-select {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-weight: 600;
  cursor: pointer;
}