
:root{
  --bg:#f4f7fb; --card:#fff; --ink:#0f172a; --muted:#5f6b7a;
  --brand:#0a66c2; --brand-2:#1f5b8c; --line:#e5ecf3;
  --shadow:0 16px 40px rgba(2,6,23,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:50;background:rgba(244,247,251,.85);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.header nav a{display:inline-block;margin:0 8px;padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none}
.header nav a:hover{background:#eaf2ff;color:var(--brand-2)}
.header nav a.active{background:#dfeeff;color:#0a66c2}
.logo{height:80px}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:12px;text-decoration:none;border:1px solid transparent;cursor:pointer;font-weight:700}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.card .img{height:220px;overflow:hidden}
.card .img img{width:100%;height:100%;object-fit:cover;display:block}
.kicker{display:inline-block;padding:.25rem .6rem;border:1px solid #cfe0ef;border-radius:999px;font-size:.8rem;color:var(--brand-2);background:#eaf2ff;margin-bottom:.5rem}
.hero--split{position:relative;background:linear-gradient(180deg,#eef3f7,#f7f9fb);border-radius:22px;padding:26px;margin:18px 0 22px;overflow:hidden}
.hero--split .media{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.hero--split .media img{width:100%;height:100%;object-fit:cover;display:block}
.hero--cta{display:flex;gap:.6rem;margin-top:1rem}
.sticky-cta{position:fixed;right:18px;bottom:18px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.sticky-cta.show{opacity:1;pointer-events:auto}
.alert{opacity:0;transition:opacity .3s ease;font-size:.9rem;color:#2e7d32}
.alert.error{color:#b00020}
.alert.show{opacity:1}
/* Animations */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.card:hover{transform:translateY(-2px);transition:transform .2s ease}
