/* =====================================
   TWÓJ MONITORING
   Premium CCTV Landing Page
===================================== */


/* ---------- RESET ---------- */


*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin:0;

    font-family:
    'Inter',
    Arial,
    sans-serif;

    color:#172033;

    background:#ffffff;

    line-height:1.6;

}



img {

    max-width:100%;

    display:block;

}



a {

    text-decoration:none;

    color:inherit;

}



ul {

    padding:0;

    list-style:none;

}



/* ---------- VARIABLES ---------- */


:root {


    --primary:#9BCB00;

    --primary-dark:#B0CB1F;

    --dark:#07111f;

    --dark2:#0c192b;

    --text:#172033;

    --gray:#f4f7fb;

    --border:#e4eaf2;

    --success:#00c878;


}





/* ---------- CONTAINER ---------- */


.container {

    width:min(1200px, 92%);

    margin:auto;

}



/* ---------- BUTTONS ---------- */


.btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    #0049d9
    );

    color:white;

    padding:

    14px 32px;

    border-radius:12px;

    font-weight:700;

    transition:.3s;

    border:none;

    cursor:pointer;

    box-shadow:

    0 10px 25px rgba(8,102,255,.25);

}



.btn:hover {

    transform:translateY(-3px);

    box-shadow:

    0 15px 35px rgba(8,102,255,.35);

}



.btn-outline {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    border:

    2px solid var(--primary);


    color:var(--primary);


    padding:

    12px 30px;


    border-radius:12px;


    font-weight:700;


    transition:.3s;


}



.btn-outline:hover {


    background:var(--primary);

    color:white;


}



.big {

    padding:

    16px 35px;

}





/* ---------- HEADER ---------- */


header {


    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:100;


    background:

    rgba(255,255,255,.92);


    backdrop-filter:blur(15px);


    border-bottom:

    1px solid rgba(0,0,0,.05);


}



.nav {


    height:82px;


    display:flex;

    align-items:center;

    justify-content:space-between;


}



.logo {


    font-size:25px;

    font-weight:800;


    letter-spacing:-1px;


}



.logo span {


    color:var(--primary);

}



nav {


    display:flex;

    gap:35px;


}



nav a {


    color:#445;

    font-weight:500;

    transition:.2s;


}



nav a:hover {


    color:var(--primary);


}







/* ---------- HERO ---------- */


.hero {


    padding-top:150px;

    padding-bottom:100px;


    background:


    radial-gradient(
    circle at top right,
    rgba(8,102,255,.12),
    transparent 40%
    );


}



.hero-grid {


    display:grid;

    grid-template-columns:

    1fr 1fr;


    gap:70px;


    align-items:center;


}



.tag {


    display:inline-block;


    padding:

    8px 18px;


    background:

    #eaf2ff;


    color:var(--primary);


    border-radius:30px;


    font-weight:700;


    margin-bottom:25px;


}



.hero h1 {


    font-size:

    clamp(40px,5vw,52px);


    line-height:

    1.05;


    letter-spacing:-2px;


    margin:0 0 25px;


}



.hero h1 strong {


    color:var(--primary);


}



.hero p {


    font-size:18px;

    color:#566174;


    max-width:600px;


}



.hero-buttons {


    display:flex;

    gap:20px;

    margin-top:35px;


}



.numbers {


    display:flex;

    gap:45px;


    margin-top:50px;


}



.numbers strong {


    display:block;

    font-size:35px;

    color:var(--primary);


}



.numbers span {


    color:#68758a;

    font-size:14px;


}



.hero-image {


    position:relative;


}



.hero-image img {


    border-radius:25px;


    box-shadow:

    0 30px 70px rgba(0,0,0,.18);


}



.floating {


    position:absolute;


    bottom:30px;

    left:-30px;


    background:white;


    padding:

    18px 25px;


    border-radius:15px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.15);


    font-weight:700;


}



.dot {


    display:inline-block;


    width:12px;

    height:12px;


    background:

    var(--success);


    border-radius:50%;


    margin-right:10px;


}







/* ---------- SECTIONS ---------- */


section {


    padding:

    100px 0;


}



h2 {


    font-size:

    clamp(32px,4vw,46px);


    line-height:1.1;


    text-align:center;


    margin-bottom:25px;


    letter-spacing:-1px;


}



.lead {


    max-width:750px;

    margin:

    0 auto 60px;


    text-align:center;


    color:#657185;


    font-size:20px;


}







/* ---------- COMPARE ---------- */


.compare {


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:30px;


}



.box {


    padding:40px;


    border-radius:20px;


    background:#f7f9fc;


}



.box h3 {


    font-size:25px;


}



.box li {


    margin:

    18px 0;


}



.good {


    background:

    linear-gradient(
    135deg,
    #eef6ff,
    #ffffff
    );


    border:

    2px solid var(--primary);


}







/* ---------- DARK ---------- */


.dark {


    background:

    var(--dark);


    color:white;


}



.dark p {


    color:#c4cfdd;


}




.two-columns {


    display:grid;


    grid-template-columns:

    1fr 1fr;


    gap:60px;


    align-items:center;


}



.rounded {


    border-radius:25px;


}



.checks div {


    margin:

    15px 0;


    font-size:18px;


    color:#d8e5ff;


}







/* ---------- CALCULATOR ---------- */


.calculator {


    background:

    var(--gray);


}



.calc-box {


    max-width:650px;


    margin:auto;


    background:white;


    padding:45px;


    border-radius:25px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.08);


}



.calc-box label {


    display:block;

    font-weight:700;

    margin-top:20px;


}



select {


    width:100%;

    padding:15px;


    border-radius:10px;

    border:1px solid var(--border);


}



.buttons {


    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:15px;


}



.buttons button {


    padding:

    12px 20px;


    border:

    1px solid var(--border);


    background:white;


    border-radius:10px;


    cursor:pointer;


}



.buttons button:hover {


    background:var(--primary);

    color:white;


}



.result {


    margin-top:30px;


    padding:25px;


    background:

    #eef5ff;


    border-radius:15px;


}



.result strong {


    color:var(--primary);


    font-size:22px;


}







/* ---------- CARDS ---------- */


.cards {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}



.card {


    position:relative;


    padding:40px;


    border-radius:25px;


    background:white;


    border:

    1px solid var(--border);


    box-shadow:

    0 15px 40px rgba(0,0,0,.05);


}



.card h3 {


    font-size:28px;


}



.card h4 {


    font-size:32px;


    color:var(--primary);


}



.card li {


    margin:15px 0;


}



.featured {


    transform:

    translateY(-15px);


    border:

    3px solid var(--primary);


}



.badge {


    position:absolute;


    top:-15px;


    right:20px;


    background:var(--primary);


    color:white;


    padding:

    6px 15px;


    border-radius:20px;


    font-size:13px;


}







/* ---------- STEPS ---------- */


.steps {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:40px;


}



.steps div {


    text-align:center;


}



.steps span {


    display:flex;


    margin:auto;


    width:60px;


    height:60px;


    justify-content:center;


    align-items:center;


    background:var(--primary);


    border-radius:50%;


    font-size:25px;


    font-weight:800;


}







/* ---------- FAQ ---------- */


.faq {


    max-width:800px;


    margin:auto;


}



details {


    background:white;


    border-bottom:

    1px solid var(--border);


    padding:25px;


}



summary {


    cursor:pointer;


    font-weight:700;


    font-size:18px;


}







/* ---------- CONTACT ---------- */


.contact {


    background:

    linear-gradient(
    135deg,
    #07111f,
    #10233c
    );


    color:white;


}



form {


    max-width:600px;


    margin:auto;


    display:grid;


    gap:15px;


}



input,
textarea {


    padding:

    16px;


    border-radius:12px;


    border:none;


    font-size:16px;


}



textarea {


    height:140px;


}



.whatsapp {


    display:block;


    margin:

    30px auto 0;


    text-align:center;


    color:#7ee5a7;


    font-weight:700;


}







footer {


    background:#050b14;


    color:#aaa;


    padding:35px;


    text-align:center;


}







/* ---------- RESPONSIVE ---------- */


@media(max-width:900px){


nav {


    display:none;


}



.hero-grid,
.two-columns {


    grid-template-columns:1fr;


}



.hero-buttons {


    flex-direction:column;


}



.numbers {


    flex-direction:column;

    gap:20px;


}



.compare,
.cards,
.steps {


    grid-template-columns:1fr;


}



.featured {


    transform:none;


}



.floating {


    left:10px;


}



}

.hidden {

    opacity:0;

    transform:
    translateY(40px);

    transition:
    .7s ease;

}


.show {

    opacity:1;

    transform:
    translateY(0);

}



.buttons button.active {

    background:
    var(--primary);

    color:white;

    border-color:
    var(--primary);

}