* { box-sizing: border-box; }
html,body { height: 100%; }
body {
    margin: 0;
    font: 15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    background: var(--bg);
    color: var(--text);
}


/* Containers */
.container {
    width: min(1100px, 92vw); margin-inline: auto;
    padding: calc(var(--spacing) * 1);
}

.container-small {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/*.container {
    padding: calc(var(--spacing) * 1);
}*/


/* ===== Helpers ===== */
.btn {
    display: inline-block;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: .2s ease;
}

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-info {
    background: var(--info);
    color: #fff;
    border-color: var(--info);
}

.btn.btn-sm {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 5px;
}

.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.btn-info:hover { background: var(--info-600); border-color: var(--info-600); }
.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--ring);
}

.btn-ghost:hover {
    background-color: var(--menu-bg-h);
}

.info {
	color: #007599!important;
}

.lead { 
    font-size: 1.05rem; color: var(--muted);
}
.cta-row { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

/* ===== FOOTER ===== */
.site-footer { border-top: 1px solid var(--ring); padding: 18px 0; margin-bottom: 20px;}
.site-footer .container { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 12px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--text); }

/* ===== CARD ===== */
.card {
    background: var(--card);
    border: 1px solid var(--ring);
    border-radius: 14px;
    padding: 16px 16px 14px;
}
.card hr {
	margin: 12px 0 24px 0;
}
.card i { width: 22px; height: 22px; margin-bottom: 8px; color: var(--primary); }
.card h1, .card h2, .card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); }

/* ===== CARD ===== */
.section-title {
	background: var(--ring);
	margin: 0 -16px;
	padding: 5px 16px;
}