:root { --maxw: 1100px; --pad: 16px; --brand:#0b5e8e; --accent:#00a4a6; --bg:#ffffff; --text:#1d2433; }
* { box-sizing: border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; color:var(--text); background:var(--bg); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.header { position: sticky; top:0; background:#ffffffd9; backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid #e6e6e6; }
.nav { display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:10px var(--pad); }
.nav .brand { font-weight:700; letter-spacing:0.3px; color:var(--brand); }
.nav ul { list-style:none; display:flex; gap:14px; margin:0; padding:0; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--pad); }
.hero { display:grid; grid-template-columns: 1fr; gap:20px; padding: 24px var(--pad); background: linear-gradient(180deg, #eef8ff, #fff); }
.hero img { width:100%; border-radius:14px; }
.hero h1 { margin:0; font-size: clamp(28px, 4vw, 44px); color:#0b3c5e; }
.grid { display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { border:1px solid #e7e7e9; border-radius:14px; padding:16px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.03); }
.footer { margin-top:40px; border-top:1px solid #e6e6e6; }
.footer .container { display:grid; gap:12px; }
.cta { display:inline-block; padding:12px 16px; background:var(--brand); color:#fff; border-radius:10px; font-weight:600; }
.badge { display:inline-block; background:#e8f5ff; color:#0b3c5e; padding:4px 8px; border-radius:999px; font-size:12px; }
.langs { font-size:13px; opacity:0.9; }
.gallery { display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gallery img { width:100%; border-radius:12px; aspect-ratio: 4/3; object-fit:cover; }
h2 { font-size: clamp(22px, 2.6vw, 30px); margin-top:8px; }
.meta { color:#556; font-size:14px; }
.hint { font-size:13px; color:#5a6472; }

.whats-float { position: fixed; right: 16px; bottom: 16px; z-index: 9999; }
.whats-float a { display:inline-flex; align-items:center; gap:8px; padding:12px 14px; border-radius:999px; background:#25D366; color:#fff; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.whats-float img { width:22px; height:22px; }
@media (max-width:640px){ .whats-float a span{ display:none; } }