:root{
  --text:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --border:#e2e8f0;
  --primary:#0a1cff;
  --primary-ink:#0612a8;
  --shadow: 0 18px 40px rgba(2, 6, 23, .10);
  --radius: 14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin:0; color:var(--text); background:var(--bg);
}
img{ max-width:100%; display:block; }

a{ color:inherit; }
.container{ max-width:1120px; margin:0 auto; padding:1.25rem; }

/* accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.55rem .8rem;
  background:#fff; border:1px solid var(--border); border-radius:.75rem; box-shadow: var(--shadow);
}

/* topbar */
.topbar{ background: #3d5991; color: #e2e8f0; font-size:.9rem; }
.topbar a{ color:#e2e8f0; text-decoration:none; }
.topbar a:hover{ text-decoration:underline; }
.topbar-inner{ display:flex; gap:.6rem; align-items:center; justify-content:flex-end; flex-wrap:wrap; padding:.55rem 1.25rem; }
.topbar-sep{ opacity:.6; }
.lang-switcher{ display:inline-flex; gap:.45rem; align-items:center; }
.lang-switcher a{ text-decoration:none; opacity:.7; letter-spacing:.04em; }
.lang-switcher a:hover{ opacity:1; text-decoration:none; }
.lang-switcher a.active{ opacity:1; font-weight:700; text-decoration:underline; }

/* header/nav */
.site-header{ background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; }
.brand-logo{ height:48px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-name{ font-weight:700; letter-spacing:-.02em; }
.brand-tagline{ font-size:.9rem; color:var(--muted); margin-top:.2rem; }

.site-nav{ display:flex; align-items:center; gap:1rem; }
.site-nav a{
  text-decoration:none; padding:.45rem .35rem; border-radius:.6rem; color:var(--text);
}
.site-nav a:hover{ background: var(--bg-soft); }
.site-nav a.active{ font-weight:700; }
.site-nav a.btn{
  background:var(--primary); color:#fff; padding:.62rem .95rem;
}
.site-nav a.btn:hover{ background: var(--primary-ink); }

.nav-toggle{ display:none; background:transparent; border:1px solid var(--border); border-radius:.75rem; padding:.55rem; cursor:pointer; }
.nav-toggle span{ display:block; width:22px; height:2px; background:var(--text); margin:4px 0; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* sections */
.section{ padding: 3.25rem 0; }
.section.soft{ background: var(--bg-soft); }
.kicker{ color: var(--primary); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
.h2{ font-size: clamp(1.5rem, 2.2vw, 2.05rem); margin:.5rem 0 0; letter-spacing:-.02em; }
.lead{ color: var(--muted); max-width: 70ch; margin:.85rem 0 0; }

/* hero */
.hero{
  background:
    radial-gradient(800px 400px at 10% 20%, rgba(10,28,255,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 30%, rgba(15,23,42,.10), transparent 55%),
    linear-gradient(#ffffff, #ffffff);
  padding: 3.6rem 0 2.6rem;
}
.hero-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items:center;
}
.hero h1{
  font-size: clamp(2rem, 3vw, 3rem);
  margin: .4rem 0 0; letter-spacing:-.03em;
}
.hero p{ color: var(--muted); margin: 1rem 0 0; max-width: 70ch; }
.hero-actions{ display:flex; gap:.9rem; align-items:center; margin-top:1.35rem; flex-wrap:wrap; }
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--primary); color:#fff; padding:.78rem 1.08rem; border-radius:.85rem;
  text-decoration:none; font-weight:700; box-shadow: var(--shadow);
}
.btn-primary:hover{ background: var(--primary-ink); }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.78rem 1.08rem; border-radius:.85rem; text-decoration:none; font-weight:700;
  border:1px solid var(--border); background:#fff;
}
.btn-ghost:hover{ background: var(--bg-soft); }
.hero-card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem; box-shadow: var(--shadow);
}
.hero-card img{
  border-radius: 12px; height: 190px; object-fit: cover; width:100%;
}
.hero-card .mini{
  display:flex; gap:.85rem; margin-top:1rem; align-items:flex-start;
}
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background: rgba(10,28,255,.10); color: var(--primary-ink);
  padding:.35rem .6rem; border-radius:999px; font-weight:700; font-size:.85rem;
}
.mini p{ margin:.2rem 0 0; color: var(--muted); font-size:.95rem; }

/* stats */
.stats{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-top: 1.25rem;
}
.stat{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1rem;
}
.stat .n{ font-size:1.4rem; font-weight:800; letter-spacing:-.03em; }
.stat .t{ color: var(--muted); margin-top:.25rem; font-size:.95rem; }

/* cards */
.grid{ display:grid; gap: 1rem; }
.grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 1.15rem; box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.card h3{ margin: .6rem 0 0; font-size:1.05rem; letter-spacing:-.01em; }
.card p{ margin: .6rem 0 0; color: var(--muted); }
.icon{
  width:42px; height:42px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(15,23,42,.06);
  font-weight:900;
}
.card a.more{
  display:inline-flex; margin-top: .9rem; text-decoration:none; font-weight:700; color: var(--primary-ink);
}
.card a.more:hover{ text-decoration:underline; }

/* process */
.steps{ counter-reset: step; }
.step{
  display:flex; gap: 1rem; align-items:flex-start;
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem; 
}
.step::before{
  counter-increment: step;
  content: counter(step);
  width:36px; height:36px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(10,28,255,.10); color: var(--primary-ink);
  font-weight:900;
}
.step h3{ margin:0; }
.step p{ margin:.35rem 0 0; color: var(--muted); }

/* testimonials */
.quote{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: 0 10px 26px rgba(2,6,23,.06);
}
.quote p{ margin:0; color: var(--muted); }
.quote .who{ margin-top:.9rem; font-weight:800; }
.quote .role{ margin-top:.15rem; color: var(--muted); font-size:.95rem; }

/* blog */
.post-card img{ border-radius: 12px; height: 170px; object-fit: cover; width:100%; border:1px solid var(--border); }
.post-meta{ margin-top:.65rem; color: var(--muted); font-size:.9rem; }
.post-title{ margin:.35rem 0 0; font-weight:800; }
.post-excerpt{ margin:.6rem 0 0; color: var(--muted); }
.tag{ display:inline-flex; margin-top:.75rem; background: rgba(15,23,42,.06); padding:.25rem .55rem; border-radius:999px; font-size:.85rem; color: var(--muted); }

/* contact */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 1rem; align-items:start; }
.contact-box{ background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 1.15rem; }
.kv{ display:grid; gap:.5rem; }
.kv div{ display:flex; justify-content:space-between; gap:1rem; }
.kv span{ color: var(--muted); }
.contact-form{ display:grid; gap:.75rem; }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; padding:.78rem .9rem; border:1px solid var(--border); border-radius:.85rem; font:inherit;
  background:#fff;
}
.contact-form textarea{ min-height:160px; resize:vertical; }
.help{ color: var(--muted); font-size:.92rem; margin-top:.5rem; }

/* footer */
.site-footer{ background:#5c6e90; color:#e2e8f0; padding: 2.5rem 0 1.25rem; margin-top: 2.5rem; }
.footer-grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 1.5rem; align-items:start;
}
.footer-brand{ font-weight:900; font-size:1.05rem; }
.footer-title{ font-weight:800; margin-bottom:.75rem; }
.footer-muted{ color: #cbd5e1; margin-top:.75rem; max-width: 55ch; }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.footer-links a{ color:#e2e8f0; text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }
.footer-bottom{ border-top:1px solid rgba(226,232,240,.18); margin-top: 1.5rem; padding-top: 1rem; }
.footer-bottom p{ margin:0; color:#cbd5e1; font-size:.92rem; }
.footer-credit{ margin-top:.35rem !important; font-size:.82rem; opacity:.75; }
.footer-credit a{ color:inherit; text-decoration:underline; }
.footer-credit a:hover{ opacity:1; }

/* responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3{ grid-template-columns: 1fr; }
  .grid.cols-2{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .nav-toggle{ display:inline-block; }
  .site-nav{
    position:absolute; right:1.25rem; top:78px;
    flex-direction:column; align-items:stretch;
    background:#fff; border:1px solid var(--border); border-radius: 1rem;
    padding:.6rem; min-width: 240px;
    display:none; box-shadow: var(--shadow);
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:.65rem .75rem; }
}
