:root{--bg:#0f172a;--card:#0b1222;--text:#e6edf3;--muted:#a9b7c6;--brand:#1b2452;--accent:#d4af37;--ok:#21a179;--err:#e23d3d}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:System-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{min-height:70vh}
.wrap{max-width:980px;margin:0 auto;padding:1.5rem;text-align:center}
.site-header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(8px);background:rgba(15,23,42,.8);border-bottom:1px solid rgba(255,255,255,.08);z-index:50}
.site-header .wrap{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.site-header .brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none;font-weight:800;letter-spacing:.2px}
.main-nav{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:center}
.main-nav a{color:var(--text);text-decoration:none;opacity:.92;padding:.35rem .6rem;border-radius:.5rem}
.main-nav a:hover{background:rgba(255,255,255,.06)}
.main-nav a.btn{background:var(--accent);color:#000;padding:.5rem 1rem;border-radius:.7rem;font-weight:800}
.lang-switch{display:flex;gap:.3rem;align-items:center;color:var(--muted)}
.hero{background:linear-gradient(135deg, rgba(27,36,82,.92), rgba(12,18,36,.92));padding:4rem 0}
.hero h1{font-size:2.3rem;margin:0 0 .5rem}
.lead{color:var(--muted);max-width:60ch;margin:0 auto}
.checklist li{margin:.35rem 0}
.site-footer{border-top:1px solid rgba(255,255,255,.08);margin-top:3rem}
.site-footer .grid{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center}
.btn{cursor:pointer;border:none}
.btn.primary{background:var(--accent);color:#000;padding:.7rem 1.1rem;border-radius:.8rem;font-weight:800}
.qform{margin:2rem auto;padding:1rem;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:1rem;max-width:760px}
.qform label{display:block;margin-bottom:.8rem;text-align:left}
.qform input,.qform select,.qform textarea{width:100%;padding:.65rem .75rem;border-radius:.6rem;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text)}
.qform .hp{position:absolute;left:-9999px;opacity:0}
.toast{position:fixed;right:1rem;bottom:1rem;padding:.8rem 1rem;border-radius:.6rem}.toast.success{background:var(--ok)}.toast.error{background:var(--err)}
.social{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.social a{display:inline-block;padding:.45rem .6rem;border-radius:.7rem;background:rgba(255,255,255,.06);color:var(--text);text-decoration:none;font-size:.9rem}
.social a:hover{background:rgba(255,255,255,.1)}
.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  text-align: center;
  justify-items: center;     /* horizontally center each item */
  align-items: start;        /* keep titles and texts aligned nicely */
}
.grid3 article {
  background: rgba(255, 255, 255, 0.03);
  padding: 1.2rem;
  border-radius: 1rem;
  max-width: 320px;
}
.grid3 h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.grid3 p {
  margin: 0 auto;
  max-width: 32ch;
  color: var(--muted);
  line-height: 1.4;
}
.site-header .brand img.logo {
  height: 32px;      /* 👈 change this value: smaller = shorter logo */
  width: auto;       /* keeps correct proportions */
  vertical-align: middle;
}
.footer-brand{
  display:flex;
  align-items:center;
  justify-content:center;     /* change to flex-start if you want left aligned */
  gap:.5rem;
  margin:1rem auto 0;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.08);
  max-width:980px;
}
.footer-logo{
  height:30px;          /* or 28–40px as you like */
  width:auto;
  display:inline-block;
  filter:none !important;          /* overrides the invert used for white logos */
  opacity:1 !important;
}
.footer-name{
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text);
}
/* Global link styles */
a { color: var(--text); text-decoration: none; }
a:visited { color: var(--text); }
a:hover { text-decoration: underline; }
/* Buttons on <a> elements */
a.btn, .btn { display: inline-block; cursor: pointer; border: none; }
a.btn.primary, .btn.primary {
  background: var(--accent);
  color: #000;
  padding: .7rem 1.1rem;
  border-radius: .8rem;
  font-weight: 800;
  text-decoration: none;
}
/* Footer links on all pages (incl. thanks) */
.site-footer .links a {
  opacity: .9;
  padding: .25rem .4rem;
  border-radius: .4rem;
}
.site-footer .links a:hover {
  opacity: 1;
  background: rgba(255,255,255,.06);
  text-decoration: none;
}