:root{
    --hs-primary:#2563eb;
    --hs-ink:#0f172a;
    --hs-soft:#f7f9ff;
    --hs-border:rgba(15,23,42,.10);
}

body{ color:var(--hs-ink); }

.bg-soft{ background:var(--hs-soft); }

.hero{ position:relative; }

.pill{
    display:inline-block;
    font-size:.85rem;
    padding:.35rem .6rem;
    border-radius:999px;
    border:1px solid var(--hs-border);
    background:#fff;
}

.pill-btn{
    cursor:pointer;
    border:1px solid var(--hs-border);
    background:#fff;
}
.pill-btn.is-active{
    border-color: rgba(37,99,235,.35);
    background: rgba(37,99,235,.10);
    color: var(--hs-primary);
}

.hero-shot{
    transition: opacity .18s ease, transform .18s ease;
}
.hero-shot.is-fading{
    opacity: 0;
    transform: scale(.995);
}

/*Hero lightbox*/
/* Hero lightbox */
.hero-clickable{
    cursor: zoom-in;
}

.hero-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2000;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease;
}

.hero-lightbox.active{
    opacity:1;
    visibility:visible;
}

.hero-lightbox img{
    max-width:92%;
    max-height:90vh;
    border-radius:12px;
    box-shadow:0 30px 60px rgba(0,0,0,.4);
}

.hero-lightbox-close{
    position:absolute;
    top:30px;
    right:40px;
    font-size:38px;
    color:white;
    cursor:pointer;
    font-weight:300;
}

.check{
    width:18px;height:18px;border-radius:999px;
    background:rgba(37,99,235,.15);
    display:inline-block;
    position:relative;
}
.check::after{
    content:"";
    position:absolute;
    left:6px; top:4px;
    width:6px; height:10px;
    border-right:2px solid var(--hs-primary);
    border-bottom:2px solid var(--hs-primary);
    transform:rotate(45deg);
}

.info-card{
    border:1px solid var(--hs-border);
    border-radius:1rem;
    padding:1.25rem;
    background:#fff;
}

.icon-card{
    border:1px solid var(--hs-border);
    border-radius:1rem;
    padding:1.25rem;
    background:#fff;
}

.icon-bubble{
    width:42px;height:42px;
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(37,99,235,.12);
    border:1px solid var(--hs-border);
    font-size:18px;
}

.feature-list{
    margin:0;
    padding-left:1.1rem;
}
.feature-list li{ margin:.45rem 0; color:rgba(15,23,42,.85); }

.fa-whatsapp{ font-size:18px; }

.how-steps{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.how-step{
    display:flex;
    gap:12px;
    padding:12px;
    border:1px solid var(--hs-border);
    border-radius:1rem;
    background:#fff;
}
.how-badge{
    width:36px;height:36px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.12);
    border:1px solid var(--hs-border);
    color:var(--hs-primary);
    font-weight:800;
    flex:0 0 auto;
}

/* Klanten review */
.review-card{
    border:1px solid var(--hs-border);
    background:#fff;
    border-radius:1.25rem;
    padding:22px;
    transition:transform .18s ease, box-shadow .18s ease;
}

.review-card:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 32px rgba(15,23,42,.08);
}

.review-header{
    display:flex;
    gap:12px;
    align-items:center;
}

.avatar{
    width:46px;
    height:46px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    background:rgba(37,99,235,.12);
    border:1px solid rgba(37,99,235,.18);
    color:var(--hs-primary);
    font-size:0.95rem;
}

.rating-stars{
    color:var(--hs-primary);
    font-size:0.9rem;
}

.kpi-grid{ display:flex; flex-direction:column; gap:14px; }
.kpi2{
    border:1px solid var(--hs-border);
    border-radius:1rem;
    padding:12px;
    background:#fff;
}
.kpi2-top{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:10px;
}
.kpi2-icon{
    width:42px;height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.12);
    border:1px solid var(--hs-border);
    color:var(--hs-primary);
    flex:0 0 auto;
}
.kpi2-value{ font-size:1.35rem; font-weight:900; line-height:1; }
.kpi2-label{ color:rgba(15,23,42,.65); font-size:.92rem; }

/* Smooth progress animation */
.kpi2 .progress-bar{
    width:0%;
    transition: width 900ms ease;
}

.progress{ height:10px; border-radius:999px; background:rgba(15,23,42,.08); }
.progress-bar{ border-radius:999px; }

.price-card{
    border:1px solid var(--hs-border);
    border-radius:1.25rem;
    padding:1.5rem;
    background:#fff;
    position:relative;
}
.price-card .price{
    font-size:1.9rem;
    font-weight:800;
}
.price-card.featured{
    border:2px solid rgba(37,99,235,.35);
    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.pricing-note{
    font-size:.95rem;
    color:rgba(15,23,42,.65);
}

.pricing-note strong{
    color:var(--hs-ink);
    font-weight:700;
}

.badge-best{
    position:absolute;
    top:16px; right:16px;
    font-size:.78rem;
    background:rgba(37,99,235,.12);
    color:var(--hs-primary);
    border:1px solid rgba(37,99,235,.25);
    padding:.25rem .55rem;
    border-radius:999px;
}

.object-fit-cover{ object-fit:cover; }

.section-icon{
    width:38px;height:38px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.12);
    border:1px solid var(--hs-border);
    color:var(--hs-primary);
}

.feature-tile{
    background:#fff;
    border:1px solid var(--hs-border);
    border-radius:1rem;
    padding:1rem;
    height:100%;

    display:flex;
    flex-direction:column;

    transition:transform .12s ease, box-shadow .12s ease;
}

.feature-tile:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(15,23,42,.08);
}

.tile-icon{
    width:42px;height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.12);
    border:1px solid var(--hs-border);
    color:var(--hs-primary);
    font-size:18px;
    flex:0 0 auto;
}

.tile-title{
    margin-top:.65rem;
    font-weight:800;
    flex:0 0 auto;
}

.tile-text{
    margin-top:.35rem;
    color:rgba(15,23,42,.68);
    font-size:.95rem;
    line-height:1.4;

    /* to sprawia, że tekst “wypełnia” kafelek i równa wysokości */
    flex:1 1 auto;
}

.icon-list{ display:flex; flex-direction:column; gap:12px; }
.icon-list-item{
    display:flex;
    gap:12px;
    padding:12px;
    border:1px solid var(--hs-border);
    border-radius:1rem;
    background:#fff;
}
.icon-list-item i{
    width:34px;height:34px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.12);
    border:1px solid var(--hs-border);
    color:var(--hs-primary);
    flex:0 0 auto;
}
.icon-list-item span{ color:rgba(15,23,42,.65); }

.cta-section{
    background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
}

.cta-badge{
    display:inline-block;
    padding:.35rem .8rem;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
    background:rgba(37,99,235,.12);
    border:1px solid rgba(37,99,235,.25);
    color:var(--hs-primary);
}

.cta-benefits{
    display:flex;
    justify-content:center;
    gap:28px;
    flex-wrap:wrap;
}

.cta-benefit{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    color:var(--hs-ink);
}

.cta-benefit i{
    color:var(--hs-primary);
}

.cta-card{
    border:1px solid var(--hs-border);
}

.cta-button{
    font-weight:700;
    letter-spacing:.3px;
    padding:14px;
    font-size:1.1rem;
}

/* x Teams */

.cta-stats{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
}

@media (min-width: 768px){
    .cta-stats{ grid-template-columns: 1fr 1fr; }
}

.cta-stat{
    display:flex;
    gap:12px;
    align-items:center;
    padding:14px 16px;
    border-radius:1rem;
    border:1px solid var(--hs-border);
    background:#fff;
}

.cta-stat-icon{
    width:44px;height:44px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.12);
    border:1px solid rgba(37,99,235,.18);
    color:var(--hs-primary);
    flex:0 0 auto;
    font-size:18px;
}

.cta-stat-value{
    font-weight:900;
    font-size:1.5rem;
    line-height:1.1;
    letter-spacing:.2px;
}

.cta-stat-label{
    color:rgba(15,23,42,.65);
    font-size:.92rem;
}

/*Policy*/
.policy-hero{
    background: linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
    border-bottom: 1px solid rgba(15,23,42,.08);
}
.policy-card{
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:1.25rem;
    padding:1.5rem;
    box-shadow:0 10px 30px rgba(15,23,42,.04);
}
.policy-card h2{
    font-size:1.25rem;
    margin-bottom:.9rem;
    font-weight:800;
}
.policy-card h3{
    font-size:1rem;
    margin-top:1rem;
    margin-bottom:.5rem;
    font-weight:700;
}
.policy-card p,
.policy-card li{
    color:rgba(15,23,42,.78);
    line-height:1.7;
}
.policy-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1rem;
}
.policy-chip{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.45rem .75rem;
    border-radius:999px;
    background:rgba(37,99,235,.08);
    border:1px solid rgba(37,99,235,.14);
    color:#2563eb;
    font-size:.92rem;
    font-weight:600;
}
.policy-toc a{
    text-decoration:none;
    color:inherit;
}
.policy-toc li + li{ margin-top:.45rem; }
.policy-note{
    background:#f8fafc;
    border:1px solid rgba(15,23,42,.08);
    border-radius:1rem;
    padding:1rem;
}
.policy-small{
    font-size:.94rem;
    color:rgba(15,23,42,.64);
}

/* Footer */
.footer-section{
    background:#ffffff;
}

.footer-title{
    font-weight:700;
    margin-bottom:12px;
}

.footer-links,
.footer-contact{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li,
.footer-contact li{
    margin-bottom:8px;
    font-size:.95rem;
}

.footer-links a{
    color:rgba(15,23,42,.65);
    text-decoration:none;
    transition:color .15s ease;
}

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

.footer-contact i{
    width:18px;
    margin-right:6px;
    color:var(--hs-primary);
}

.footer-social{
    display:flex;
    gap:12px;
}

.footer-social a{
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--hs-border);
    background:rgba(37,99,235,.08);
    color:var(--hs-primary);
    transition:all .15s ease;
}

.footer-social a:hover{
    background:var(--hs-primary);
    color:#fff;
    transform:translateY(-2px);
}

/* Wyrównanie wysokości na większych ekranach */
@media (min-width: 768px){
    .feature-tile{ min-height: 178px; }
}

/* Szeroki kafelek (ten na całą szerokość) */
.feature-tile-wide{
    display:flex;
    gap:12px;
    align-items:flex-start;
    min-height:auto; /* nie wymuszamy wysokości */
}
.feature-tile-wide .tile-icon{ margin-top:2px; }
.feature-tile-wide .tile-title{ margin-top:0; }
.feature-tile-wide .tile-text{ margin-top:.25rem; }