:root{
  --bg:#f5f7fb;
  --ink:#223154;
  --muted:#6a7aa1;
  --blue:#0050b3;
  --blue-2:#0b66d6;
  --white:#fff;
  --card:#ffffffcc;
  --line:#e7ecf5;
  --shadow:0 10px 30px rgba(15, 32, 68, .08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

.btn{
  display:inline-block;
  border-radius:10px;
  padding:12px 18px;
  text-decoration:none;
  font-weight:600;
  transition:all .2s ease;
  border:1px solid transparent;
  cursor:pointer;
}
.btn.small{padding:10px 14px;font-size:14px}
.btn.wide{display:block;text-align:center;width:100%}
.btn.solid{background:var(--blue);color:var(--white)}
.btn.solid:hover{background:var(--blue-2)}
.btn.light{background:var(--white);color:var(--blue);border-color:var(--line)}
.btn.light:hover{box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--white);border-color:#ffffff44}
.btn.ghost:hover{background:#ffffff14}

.logo{width:40px;height:40px;border-radius:8px}
.logo.small{width:28px;height:28px}
.brand{display:flex;align-items:center;gap:12px}
.brand-name{font-weight:800;letter-spacing:.2px}

.topnav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;
}

.hero{
  background:linear-gradient(160deg, #0b3c80 0%, #0a56b3 60%, #0a67d8 100%);
  color:var(--white);
  padding-bottom:40px;
}
.hero-inner{padding:40px 0 24px}
.hero h1{
  font-size: clamp(28px, 4.6vw, 48px);
  line-height:1.1;
  margin:12px 0;
}
.hero .sub{
  max-width:800px;
  margin:12px 0 20px;
  color:#e8f0ff;
}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.badges{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.badges li{background:#ffffff1a;color:#e7f0ff;border:1px solid #ffffff33;border-radius:999px;padding:8px 12px;font-size:14px}

.social{background:#e9f0fb;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.social .wrap{padding:20px 0;text-align:center}
.social-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

section{padding:56px 0}

.benefits .grid,
.plans .grid{display:grid;gap:18px}
.grid.g2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid.g3{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 880px){
  .grid.g2,.grid.g3{grid-template-columns: 1fr}
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(6px);
}

.how .steps{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 880px){ .how .steps{grid-template-columns: 1fr} }
.step{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
  position:relative;
}
.step .num{
  position:absolute; top:-12px; left:-12px;
  width:36px; height:36px; border-radius:50%;
  background:var(--blue); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; box-shadow:var(--shadow);
}

.plans .plan{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
}
.plans .plan h3{margin-top:0}
.plans .plan ul{padding-left:18px;margin:12px 0 18px}

.note{color:var(--muted);margin-top:12px}

.beta .beta-actions{margin-top:14px}

.faq details{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  margin:10px 0;
  box-shadow:var(--shadow);
}
.faq summary{cursor:pointer;font-weight:700}

.footer{
  border-top:1px solid var(--line);
  background:#f2f6fc;
  margin-top:12px;
  padding:22px 0 28px;
}
.footer-grid{
  display:grid; gap:16px;
  grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 880px){ .footer-grid{grid-template-columns:1fr} }
.footer .links{list-style:none;margin:0;padding:0}
.footer .links li{margin:6px 0}
.footer .links a{text-decoration:none;color:var(--ink)}
.footer .links a:hover{text-decoration:underline}
.footer .muted{color:var(--muted)}
.footer .legal{color:var(--muted);text-align:center;margin-top:10px;font-size:14px}

:root{
  --blue:#00549C; --blue-2:#1f4f82; --soft:#f4f7fb; --ink:#223046; --muted:#6b7a90;
  --radius:12px; --shadow:0 10px 30px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--soft);color:var(--ink);margin:0}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* NAV */
.nav{background:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:700}
.logo{width:28px;height:28px}
.nav-links a{margin-left:18px;text-decoration:none;color:var(--ink)}
.nav-links .btn{margin-left:10px}

/* HERO */
.hero{background:linear-gradient(180deg,#0b63b8 0%,#084a86 100%);color:#fff;padding:64px 0}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hero h1{font-size:2.4rem;margin:0 0 10px}
.lead{font-size:1.1rem;opacity:.95}
.hero-ctas{margin-top:18px;display:flex;gap:12px}
.hero-img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.note{margin-top:12px;opacity:.85}

/* TRUST BADGES */
.trust{background:#fff;padding:16px 0;border-bottom:1px solid #e8edf3}
.trust-inner{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.badge{background:#eef4fb;color:#0b63b8;padding:.35rem .6rem;border-radius:999px;font-size:.85rem}

/* GENERIC */
section{padding:56px 0}
h2{margin:0 0 18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;padding:20px;border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:8px;text-decoration:none;font-weight:600}
.btn-primary{background:#fff;color:#0b63b8}
.btn-ghost{border:1px solid #fff;color:#fff}
.btn-light{border:1px solid #c9d5e6;color:var(--blue)}
.btn-primary:hover{opacity:.9}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.table th,.table td{padding:14px;border-bottom:1px solid #e8edf3;text-align:left}
.table th{background:#f7fafd}

/* HOW */
.how .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{background:#fff;padding:16px;border-radius:var(--radius);box-shadow:var(--shadow)}
.step .num{background:#0b63b8;color:#fff;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font-weight:700;margin-bottom:8px}
.micro-note{margin-top:10px;color:var(--muted);font-size:.9rem}

/* PRICING */
.pricing .price-card{background:#fff;padding:20px;border-radius:var(--radius);box-shadow:var(--shadow);position:relative}
.pricing .price-card .price{font-size:1rem;color:var(--muted)}
.pricing .price-card .price span{font-size:1.8rem;color:var(--ink);font-weight:700}
.pricing .featured{border:2px solid #0b63b8}
.ribbon{position:absolute;top:-10px;right:-10px;background:#0b63b8;color:#fff;padding:.25rem .5rem;border-radius:6px;font-size:.8rem}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.faq-item{background:#fff;padding:16px;border-radius:var(--radius);box-shadow:var(--shadow)}

/* CONTACT */
.contact .cta-row{display:flex;gap:12px;justify-content:center;margin-top:14px}
.btn.btn-ghost{border-color:#0b63b8;color:#0b63b8;background:#fff}

/* FOOTER */
.footer{background:#e8edf3;padding:18px 0;text-align:center;font-size:.92rem;color:#3a4a62}

/* RESPONSIVE */
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .how .steps{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}
.lang-switch {
  font-size: 0.9rem;
  margin-left: 20px;
  display: inline-block;
}

.lang-switch a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}

.lang-switch a:hover {
  text-decoration: underline;
}