/* ===============================
   Base & Layout
   =============================== */
:root{
    --blue:#158fd4;
    --ink:#0c1222;
    --muted:#6b7280;
    --bg:#f7f8fb;
    --card:#ffffff;
    --ring:#dce6f7;
}
*{box-sizing:border-box}
html{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg)}
body{margin:0}
a{color:var(--blue); text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* ===============================
   Header & Nav
   =============================== */
.site-header{background:#fff; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:50}
.header-inner{display:flex; align-items:center; gap:20px; padding:14px 0}
.logo{font-weight:800; font-size:20px; color:var(--ink)}
.nav{display:flex; gap:16px; margin-left:auto}
.nav a{padding:6px 10px; border-radius:10px; color:var(--ink)}
.nav a.active, .nav a:hover{background:var(--ring)}
.cta-wrap{display:flex; gap:10px; margin-left:10px}
.burger{display:none; background:transparent; border:0; font-size:22px}

/* ===============================
   Buttons
   =============================== */
.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; border:1px solid transparent; font-weight:600; cursor:pointer}
.btn.primary{background:var(--blue); color:#fff}
.btn.ghost{background:#fff; border-color:var(--ring); color:var(--ink)}
.btn.block{width:100%}

/* ===============================
   Hero
   =============================== */
.hero{padding:32px 0}
.hero-inner{display:grid; grid-template-columns:1.15fr 0.85fr; gap:32px; align-items:center}
.hero-copy h1{font-size:34px; line-height:1.05; margin:0 0 10px}
.hero-copy .lead{font-size:18px; color:var(--muted)}
.hero-ctas{display:flex; gap:12px; margin:18px 0}
.accent{color:var(--blue)}
.ticks{list-style: none; padding:0; margin:22px 0 0 0}
.ticks li{padding-left:26px; background:url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"%230061AE\"><path d=\"M20.285 2l-11.285 11.567-5.285-5.011-3.715 3.716 9 8.728 15-15.284z\"/></svg>') no-repeat 0 2px; margin:8px 0}
.hero-art .card{background:var(--card); border:1px solid var(--ring); border-radius:16px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,.05)}
.kpis{list-style:none; padding:0; display:flex; gap:24px; margin:10px 0 0}
.kpis li strong{font-size:28px; display:block}

/* ===============================
   Cards & Sections
   =============================== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px auto 48px}
.feature-card{background:#fff; border:1px solid var(--ring); border-radius:16px; padding:18px}
.cta-band{background:linear-gradient(90deg, var(--blue), #2f7ec5); color:#fff; padding:34px 0}
.band-inner{display:flex; align-items:center; gap:14px; justify-content:center}
.page-head{padding:0 12px}
.page-head .lead{color:var(--muted)}
.feature-sections article{background:#fff; border:1px solid var(--ring); border-radius:16px; padding:18px; margin:14px 0}
.steps{counter-reset:step; list-style:none; padding:0}
.steps li{background:#fff; border:1px solid var(--ring); border-radius:16px; padding:18px; margin:12px 0; position:relative}
.steps li h3{margin:0 0 6px}
.steps li::before{counter-increment:step; content:counter(step); position:absolute; left:-12px; top:-12px; width:36px; height:36px; display:grid; place-items:center; background:var(--blue); color:#fff; border-radius:50%}

/* ===============================
   Pricing
   =============================== */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:14px auto 40px auto;}
.price-card{background:#fff; border:1px solid var(--ring); border-radius:16px; padding:20px}
.price-card.featured{border:2px solid var(--blue)}
.price{font-size:32px; margin:0 0 10px}
.price span{font-size:14px; color:var(--muted); font-weight:500}

/* ===============================
   Forms & Alerts
   =============================== */
.form-wrap{margin:18px auto 40px auto;}
.form{display:grid; gap:14px}
.form input, .form textarea{width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px; font:inherit; background:#fff}
label{display:grid; gap:8px; font-weight:600}
.alert{padding:12px 14px; border-radius:12px; margin-bottom:14px}
.alert.success{background:#e8fff1; border:1px solid #b7efc5}
.alert.danger{background:#fff0f0; border:1px solid #f2c7c7}
.small{font-size:12px}
.muted{color:var(--muted)}

/* ===============================
   Footer
   =============================== */
/* Footer Base */
.site-footer {
    background: #fff;
    border-top: 1px solid #e5e7eb;
    margin-top: 40px;
    font-size: 15px;
    color: var(--muted);
}

/* Footer Grid Layout */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    padding: 40px 0 28px;
}

/* Footer Columns */
.footer-col h4 {
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--ink);
}

/* Stacked Links */
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-links a {
    text-decoration: none;
    color: var(--muted);
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--blue);
}

/* Buttons */
.footer-col .btn.block {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

/* Fineprint */
.fineprint {
    border-top: 1px solid #eef2f7;
    padding: 14px 0 24px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

/* Responsive Footer */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-col h4 {
        margin-top: 10px;
    }
    .footer-links {
        align-items: center;
    }
}

/* ===============================
   Responsive
   =============================== */
@media (max-width: 980px){
    .hero-inner{grid-template-columns:1fr}
    .pricing-grid, .grid-3, .footer-grid{grid-template-columns:1fr}
    .nav{display:none}
    .burger{display:block}
}

/* Cookie Toast
   -------------------------------------------------- */
.cookie-toast {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 9999;
    display: block;
}

.cookie-toast[hidden] { display: none; }

.cookie-toast__inner {
    background: #111827;              /* near-black for contrast */
    color: #fff;
    border: 1px solid #1f2937;
    border-radius: 12px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    box-shadow: 0 14px 28px rgba(0,0,0,.18), 0 10px 10px rgba(0,0,0,.12);
}

.cookie-toast__copy {
    display: grid;
    gap: 6px;
    font-size: 14px;
    line-height: 1.45;
}

.cookie-toast__copy a {
    color: var(--blue);
    text-decoration: underline;
}

.cookie-toast__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .cookie-toast__inner {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .cookie-toast__actions {
        justify-content: stretch;
    }
    .cookie-toast__actions .btn {
        width: 100%;
    }
}