:root{
  --blue:#2f5d8a;
  --blue-700:#244968;
  --orange:#ff8a00;
  --bg:#f5f7fa;
  --text:#233549;
  --muted:#6b7a8c;
  --white:#fff;
  --gray:#e6ebf1;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.6;
}
img{display:block; max-width:100%; height:auto; border-radius:12px}
a{color:var(--blue); text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1120px, 92%); margin:0 auto}
.visually-hidden{position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.9rem 1.2rem; border-radius:12px; border:0; cursor:pointer; font-weight:700}
.btn-primary{background:var(--orange); color:#1e1e1e}
.btn-secondary{background:var(--blue); color:#fff}
.btn-outline{background:transparent; border:2px solid var(--muted); color:var(--muted)}
.link{font-weight:700}
.rounded{border-radius:var(--radius)}
/* Header */
.site-header{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px); box-shadow:0 2px 12px rgba(0,0,0,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.7rem; font-weight:800; color:var(--blue-700)}
.brand img{border-radius:50%}
.navbar{display:flex; gap:1rem; align-items:center}
.navbar a{padding:.5rem .7rem; border-radius:10px; font-weight:700; color:var(--text)}
.navbar a.active, .navbar a:hover{background:var(--gray)}
/* Hero */
.hero{padding:3rem 0; background:linear-gradient(135deg, #eaf2fb 0%, #fff 100%)}
.hero-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:2rem; align-items:center}
.hero-text h1{font-size:2.2rem; margin:.2rem 0 1rem}
.hero-text p{color:var(--muted)}
.hero-actions{display:flex; gap:1rem; margin-top:1rem}
.hero-img{box-shadow:var(--shadow)}
.socials{display:flex; gap:.6rem; margin-top:1rem}
.social{display:inline-flex; align-items:center; justify-content:center; width:40px;height:40px; border-radius:12px; background:#fff; color:var(--blue); box-shadow:var(--shadow)}
/* Features */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin:2rem auto}
.feature{background:#fff; padding:1.2rem; border-radius:16px; box-shadow:var(--shadow)}
.feature .icon{width:48px;height:48px; display:grid; place-items:center; background:#eef5ff; color:var(--blue); border-radius:12px; margin-bottom:.6rem}
/* Cards grid */
.home-grid, .cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin:2rem auto}
.card{background:#fff; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column}
.card-body{padding:1rem}
.cta .cta-box{background:linear-gradient(135deg, var(--blue) 0%, var(--blue-700) 100%); color:#fff; padding:2rem; border-radius:20px; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.cta .btn{box-shadow:var(--shadow)}
/* Page hero */
.page-hero{padding:2.4rem 0; background:#fff; border-bottom:1px solid var(--gray)}
.page-hero.alt{background:linear-gradient(135deg,#fff 0%,#fef3e6 100%)}
/* Sections */
.section{margin:2.2rem auto}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; align-items:center}
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.tile{background:#fff; padding:1rem; border-radius:16px; box-shadow:var(--shadow)}
.table-like>div{display:grid; grid-template-columns:1.2fr .6fr .6fr 1.4fr; gap:.6rem; padding:.6rem .8rem; background:#fff; border-bottom:1px solid var(--bg)}
.table-like>div:first-child{background:#eef5ff; font-weight:800}
/* Newsletter */
.newsletter{background:#fff; margin:2.2rem 0 0; padding:1.6rem 0; border-top:1px solid var(--gray); border-bottom:1px solid var(--gray)}
.nl-text h2{margin:.2rem 0}
.nl-form{display:flex; gap:.6rem}
.nl-form input{flex:1; padding:.9rem 1rem; border:2px solid var(--gray); border-radius:12px; outline:none}
.mini-form{display:flex; gap:.6rem; margin-top:.6rem}
.mini-form input{flex:1; padding:.6rem .8rem; border:2px solid var(--gray); border-radius:10px}
/* Lists */
.rich-list{padding-left:1rem}
.rich-list li{margin:.4rem 0}
/* Stories */
.story-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.story{background:#fff; padding:1rem; border-radius:16px; box-shadow:var(--shadow)}
/* Posts */
.post .post-header{margin:1.6rem 0}
.post .meta{color:var(--muted)}
.post-content h2{margin-top:1.4rem}
.post-cta{display:flex; gap:1rem; margin-top:1.4rem}
/* Contact */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1.4rem}
.contact-card{background:#fff; padding:1rem; border-radius:16px; box-shadow:var(--shadow)}
.contact-form label{display:block; font-weight:700; margin:.4rem 0}
.contact-form input,.contact-form textarea{width:100%; padding:.8rem 1rem; border:2px solid var(--gray); border-radius:10px; outline:none}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.info-block{background:#fff; padding:1rem; border-radius:16px; box-shadow:var(--shadow); margin-top:1rem}
/* Footer */
.site-footer{margin-top:2rem; background:#0f2438; color:#dfe7f0}
.site-footer a{color:#dfe7f0}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:1.2rem; padding:2rem 0}
.brand-footer{color:#fff; display:flex; gap:.6rem; align-items:center}
.subfooter{padding:.8rem 0; border-top:1px solid rgba(255,255,255,.08); font-size:.95rem}
.footer-links{list-style:none; padding:0; margin:.6rem 0 0}
.footer-links li{margin:.3rem 0}
/* Featured post on blog */
.featured-post{background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow)}
.fp-body{padding:1rem}
/* Mistakes block */
.mistakes{background:#fff; padding:1.2rem; border-radius:16px; box-shadow:var(--shadow)}
.mistakes-list{margin:.6rem 0 0}
.mistakes-list li{margin:.4rem 0}
/* Team */
.team{margin-top:1rem}
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.team-card{background:#fff; padding:1rem; border-radius:16px; box-shadow:var(--shadow); text-align:center}
.team-card img{object-fit:cover; border-radius:14px}
/* Cookie banner */
.cookie-banner{position:fixed; left:0; right:0; bottom:-100%; background:#0f2438; color:#fff; transition:.3s ease; z-index:9999}
.cookie-banner.show{bottom:0}
.cookie-content{width:min(1120px,92%); margin:0 auto; display:grid; grid-template-columns:1.2fr .8fr; gap:1rem; padding:1rem}
.cookie-actions{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.cookie-options{display:none; grid-column:1 / -1; background:#0b1a2a; padding:.6rem; border-radius:10px}
.cookie-options.show{display:flex; gap:1rem}
.cookie-close{position:absolute; top:.4rem; right:.6rem; width:36px;height:36px; border-radius:10px; border:0; background:#0b1a2a; color:#fff; font-size:20px; cursor:pointer}
/* Modal */
.modal{position:fixed; inset:0; background:rgba(15,36,56,.6); display:none; align-items:center; justify-content:center; z-index:9998}
.modal.show{display:flex}
.modal-dialog{background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:1rem; width:min(520px, 92%)}
.modal-body{text-align:center}
/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .features, .home-grid, .cards-3, .tiles, .story-grid, .team-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .features, .home-grid, .cards-3, .tiles, .story-grid, .team-grid{grid-template-columns:1fr}
  .navbar{gap:.4rem}
  .cookie-content{grid-template-columns:1fr}
}