/* ===== FabricDigital Blue Theme w/ Logo Header (Responsive) ===== */
:root{
  --blue-dark:#0c1b33;
  --blue:#1e3a8a;
  --blue-mid:#274bcc;
  --accent:#ffc107;
  --bg:#f5f7fb;
  --text:#1f2a3a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}

/* Header with logo */
header{background:var(--blue-dark);color:#fff}
.header-bar{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;gap:1rem;
  padding:.75rem 1rem;
}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:#fff;flex:1 1 auto}
.brand img{height:48px;width:auto;display:block}
.brand .ttl{display:flex;flex-direction:column}
.brand .ttl h1{margin:0;font-size:1.4rem;line-height:1.2}
.brand .ttl p{margin:.15rem 0 0 0;font-size:.9rem;opacity:.9}

/* Language switch */
.lang a{color:#fff;background:rgba(30,58,138,.9);padding:.4rem .6rem;border-radius:8px;text-decoration:none}

/* Nav */
nav{background:var(--blue);}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;padding:0 .5rem}
nav a{color:#fff; padding:1rem .9rem; display:block; border-radius:6px; text-decoration:none}
nav a:hover{background:rgba(255,255,255,.14)}

/* Layout */
main{max-width:1100px;margin:0 auto;padding:2rem 1.25rem}
section{margin:2.25rem 0}
section h2{margin:0 0 .75rem;padding-bottom:.4rem;border-bottom:3px solid var(--accent)}

/* Grid & Cards */
.grid{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center}
.card{
  background:#fff;border:1px solid #e6ebff;border-radius:12px;padding:1.25rem 1.1rem;
  box-shadow:0 6px 16px rgba(12,27,51,.06);
  flex:1 1 320px;max-width:520px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.card h3{margin:.2rem 0 .4rem;color:var(--blue)}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(12,27,51,.10)}
.btn{display:inline-block;margin-top:.8rem;background:var(--blue);color:#fff;padding:.55rem .9rem;border-radius:8px}

/* Forms */
.form-wrap{max-width:720px;margin:0 auto}
.form{background:#fff;border:1px solid #e6ebff;border-radius:12px;box-shadow:0 6px 16px rgba(12,27,51,.06);padding:1.25rem}
label{display:block;margin:.5rem 0 .25rem}
input[type="text"],input[type="email"],textarea{width:100%;padding:.7rem .8rem;border:1px solid #cfe0ff;border-radius:8px;background:#fff}
textarea{min-height:160px;resize:vertical}
button[type="submit"]{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:.7rem 1.1rem;cursor:pointer}
button[type="submit"]:hover{background:#2042a0}
.helper{font-size:.9rem;color:#4b6aa9}
.hidden-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Blog helpers */
.post-list .card h3{font-size:1.1rem}
.backbar{margin-top:2rem;text-align:center}
.backbar a{display:inline-block;background:var(--blue);color:#fff;padding:.6rem 1rem;border-radius:8px}

/* Footer */
footer{background:var(--blue-dark);color:#cfe0ff;text-align:center;padding:1rem;margin-top:2rem}

/* Responsive */
@media (max-width:768px){
  .brand img{height:40px}
  .brand .ttl h1{font-size:1.2rem}
  .brand .ttl p{font-size:.85rem}
}