/* ======================================
   RESET
====================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ======================================
   VARIABLES
====================================== */

:root {

    --blue: #3B82F6;
    --green: #10B981;

    --text: #1F2937;
    --light: #6B7280;

    --background: #F8FAFC;
    --white: #FFFFFF;

    --radius: 20px;

}


/* ======================================
   BASE
====================================== */

body {

    font-family: "Inter", sans-serif;
    background: var(--background);
    color: var(--text);

}


/* ======================================
   LAYOUT
====================================== */

.container {

    max-width: 1200px;
    margin: auto;
    padding: 80px 24px;

}


/* ======================================
   HERO
====================================== */

.hero {

    text-align: center;
    margin-bottom:80px;

}


/* ======================================
   LOGO
====================================== */

.logo {

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;

}

.logo-icon {

    width:60px;
    height:60px;
    position:relative;
    
    
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius:18px;

    color: white;
    font-size: 20px;
    font-weight: 700;

    background: linear-gradient(
        135deg,
        var(--blue),
        var(--green)
    );
    
    box-shadow:
    0 12px 30px rgba(16,185,129,.18),
    0 8px 20px rgba(59,130,246,.20);
    
    

    
}

.logo-icon::before {

    content:"";

    position:absolute;

    width:54px;
    height:54px;

    background:rgba(239,246,255,1);
    border:2.5px solid #dbeafe;
    border-radius:16px;

    top:8px;
    left:-10px;

    z-index:-1;

}



.logo-icon::after {

    content:"";

    position:absolute;

    width:54px;
    height:54px;

    background:rgba(236,253,245,1);
    border:2.5px solid #d1fae5;
    border-radius:16px;

    bottom:-10px;
    right:-10px;

    z-index:-1;

}

.logo-name {

    font-size: 42px;
    font-weight: 700;
    letter-spacing: -2px;

}

.tool {
    color: var(--text);
}

.pack {

    background: linear-gradient(
        135deg,
        var(--blue),
        var(--green)
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}


/* ======================================
   TAGLINE
====================================== */

.tagline {

    margin-top: 20px;
    font-size: 20px;
    color: var(--light);
    line-height:1.6;

    
}

.tagline span {

    display:block;

    margin-top:6px;

    font-weight:600;

    color:#334155;


    background: linear-gradient(
        135deg,
        var(--blue),
        var(--green)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    
    
}

/* ======================================
   SEARCH
====================================== */

.search-box {

    max-width: 720px;
    height: 68px;

    margin:65px auto 0;
    padding: 0 25px;

    display: flex;
    align-items: center;

    background: var(--white);

    border: 2px solid transparent;
    border-radius: 22px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease;

}

.search-box:focus-within {

    transform: translateY(-1px);

    border-color: rgba(59, 130, 246, .35);

    box-shadow:
        0 18px 40px rgba(59, 130, 246, .12);

}

.search-icon {

    font-size: 22px;
    margin-right: 15px;

}

.search-box input {

    width: 100%;

    border: none;
    outline: none;

    font-size: 18px;
    font-family: inherit;

    background: transparent;

}


/* ======================================
   POPULAR TOOLS
====================================== */

.popular {

    margin-top: 45px;

}

.popular h2 {

    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;

}

.popular-list {

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;

}

.popular-list a {

    text-decoration: none;

    color: #334155;

    background: var(--white);

    padding: 12px 20px;

    border-radius: 999px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .05);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        color .2s ease;

}

.popular-list a:hover {

    transform: translateY(-3px);

    background: #EFF6FF;

    color: var(--blue);

    box-shadow:
        0 12px 24px rgba(59, 130, 246, .12);

}


/* ======================================
   CATEGORIES
====================================== */

.categories {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 30px;

}


/* ======================================
   CATEGORY CARD
====================================== */

.card {

    background: var(--white);

    padding: 30px;

    border-radius: var(--radius);

    box-shadow: 0 8px 25px rgba(0, 0, 0, .04);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);

}

.card h2 {

    margin-bottom: 20px;

}

.card ul {

    list-style: none;

}

.card li {

    margin-bottom: 14px;

color:#334155;

    text-decoration:none;

    font-weight:500;

    transition:.2s;

}


.card li a:hover {

    color:var(--blue);


    
}

.card a {

    display: inline-block;

    margin-top: 20px;

    color: var(--blue);

    text-decoration: none;

    font-weight: 600;

}


/* ======================================
   FEATURED TOOLS - SZYBKI DOSTĘP
====================================== */


.featured-tools {

    margin-top:60px;

}


.featured-tools h2 {

    text-align:center;

    font-size:24px;

    font-weight:700;

    margin-bottom:30px;

}



/* GRID */

.tool-grid {

        display:grid;

    grid-template-columns:
    repeat(4, 1fr);

    justify-content:center;

    gap:20px;

}



/* TOOL CARD */

.tool-card {

    background:white;

    border-radius:20px;

       padding:20px;

    height:90px;

    text-decoration:none;

    color:var(--text);


    border:2px solid rgba(59,130,246,.18);


    display:flex;

    align-items:center;

    gap:18px;


    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}



/* IKONA */

.tool-icon {

    width:42px;

    height:42px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:#eff6ff;

    font-size:24px;

}



/* TEKST */

.tool-card h3 {

    font-size:18px;
    line-height:1.2;
    margin-bottom:5px;


    
}


.tool-card p {

    font-size:14px;
    line-height:1.2;
    color:var(--light);

}



/* HOVER */

.tool-card:hover {

    transform:translateY(-4px);

    border-color:rgba(59,130,246,.5);

    box-shadow:
    0 12px 30px rgba(59,130,246,.10);

}



/* ======================================
   RESPONSIVE
====================================== */

/* Tutaj będziemy dodawać media queries */

@media (max-width: 992px) {

    .tool-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 768px) {


    .tool-grid {

        grid-template-columns: 1fr;

    }


}

@media(max-width:768px){

.logo{

    justify-content:flex-start;

}

  .logo-name {

        font-size:28px;
        letter-spacing:-1px;

}

}
@media(max-width:768px){

    .container {

        padding:30px 20px;

    }

}

@media(max-width:768px){

    .logo-icon {

        width:44px;
        height:44px;
        border-radius:14px;

        font-size:16px;

    }

}