/* ======================================
   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;
    --card-border: rgba(59,130,246,.30);
}


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

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

 
}


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

.container {

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

}


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

.hero {

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

}


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

.hero-description {

    max-width: 520px;

    margin: 24px auto 0;

    font-size: 16px;

    color: var(--light);

    line-height: 1.6;

}
/* ======================================
   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;

}



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

.tagline {

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

.tagline span {

    display: block;
    margin-top: 8px;
    font-size: 30px;
    font-weight: 700;
    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: 35px auto 0;
    padding: 0 25px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--white);
    border: 2px solid rgba(59,130,246,.32);
    border-radius: 22px;
    box-shadow:  0 8px 24px rgba(15, 23, 42, .05),
                 0 2px 6px rgba(15, 23, 42, .03);
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .2s ease;

}

.search-box input::placeholder {

    color: #CBD5E1;

}

.search-box:hover {

    transform: translateY(-3px);

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

}


/*
.search-box::before {

    content: "";
    position: absolute;
    inset: -2px;
    z-index: 0;
    overflow: hidden;
    border-radius: 24px;
    background:
        conic-gradient(
            
        var(--blue),
        var(--green),
        transparent 40%
        );

    animation: searchGlow 10s linear infinite;

}


@keyframes searchGlow {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
*/
.search-box::after {

    content: "";
    position: absolute;
    inset: 3px;
    background: var(--white);
    border-radius: 20px;
    z-index: 1;

}


.search-box:focus-within {

    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, .55);
    box-shadow:
        0 14px 36px rgba(59,130,246,.10),
        0 4px 10px rgba(59,130,246,.06);

}

.search-box:focus-within input {

    color: #111827;

}

.search-icon {

    width: 22px;
    height: 22px;
    margin-right: 15px;
    opacity: .8;
    color: #64748B;
    transition: .25s ease;

}

.search-icon svg {

    width: 100%;
    height: 100%;

}

.search-box:focus-within .search-icon {

    opacity: 1;
    color: var(--blue);

}


.search-box input {

    width: 100%;
    border: none;
    outline: none;
    font-size: 18px;
    font-family: inherit;
    background: transparent;
    color: #1F2937;
    transition: color .25s ease;
    font-weight: 500;

}



.search-box > * {

    position: relative;
    z-index:2;

}

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

.categories {

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

    gap: 30px;

    align-items: start;

}

.category-divider {

    height:1px;

    background:#e2e8f0;

    margin:20px 0;

}
/* ======================================
   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;
    display: flex;
    align-items: center;
    gap: 8px;
}

.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;

}

.category-tool-icon {

    width: 22px;
    height: 22px;
    margin-right: 10px;

}

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


.featured-tools {

    margin-top: 60px;
    margin-bottom: 100px;
    position: relative;
    padding-bottom: 40px;

    
}
.featured-tools::after{

    content: "";
    position: absolute;
    right: 0;
    top: 50px;
    width: 80px;
    height: 120px;
    pointer-events :none;
    background:
    linear-gradient(
        90deg,
        transparent,
        var(--background)
    );

}

.featured-tools h2 {

    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;

}



/* ======================================
   TOOL CAROUSEL
====================================== */

.tool-carousel {

    display: flex;
   
    padding: 20px 0 30px;
    
    
    
    
}


.tool-carousel::-webkit-scrollbar{

    display:none;

}

/* ======================================
   CAROUSEL HEADER
====================================== */

.carousel-header {

    
    position: relative;
    margin-bottom: 30px;
    text-align: center;
    
}


.carousel-header h2 {

    margin: 0;

}


.carousel-buttons {

    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    gap: 12px;

}


.carousel-buttons button {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    border: 1px solid rgba(59,130,246,.25);
    background: white;

    color: #3B82F6;

    font-size: 20px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .2s ease;

}


.carousel-buttons button:hover {

    background:#3B82F6;
    color:white;

}


/* ======================================
   TOOL CARD
====================================== */


.tool-card {

    background: white;
    border-radius: 20px;
    padding: 20px;
    flex: 0 0 260px;
    scroll-snap-align: center;
    height: 110px;
    text-decoration: none;
    color: var(--text);
    border: 2px solid #60A5FA;
    display: flex;
    align-items: center;
    gap: 18px;
    transition :
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

   .carousel-wrapper {

       position: relative;
       overflow: hidden;
       padding-bottom: 80px;
}

    .carousel-wrapper::before,
    .carousel-wrapper::after {

       content: "";
       position: absolute;
       top: 0;
       width: 90px;
       height: 100%;
       z-index: 2;
       pointer-events: none;

}

.carousel-wrapper::before {

    left:0;
    background:
    linear-gradient(
        90deg,
        var(--background),
        transparent
    );

}

.carousel-wrapper::after {

    right:0;
    background:
    linear-gradient(
        -90deg,
        var(--background),
        transparent
    );

}



/* ======================================
   TOOL ICON
====================================== */

.tool-icon {

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: linear-gradient(
        135deg,
        #F0FDF4,
        #DCFCE7
    );

    border: 1px solid rgba(34,197,94,.15);

    box-shadow:
        0 4px 10px rgba(34,197,94,.10),
        inset 0 1px 0 rgba(255,255,255,.65);

}


.tool-card:hover .tool-icon {

     transform: translateY(-1px);


    transition: .25s ease;

}


.tool-icon img {

    width: 24px;
    height: 24px;
    display: block;

}

/* ======================================
   TEXT
====================================== */

.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
====================================== */



/* ======================================
   TOP HEADER
====================================== */

.top-header{

    position: absolute;
    top: 32px;
    left: 32px;
    z-index: 10;


}

/* ======================================
   CATEGORY EXPAND LIST
====================================== */


.tool-list {

    list-style: none;

}


.tool-list a {

    display: inline;
    margin-top: 0;

}




 .tool-list li {

    display:flex;
    align-items:center;
    justify-content:flex-start;

    gap:10px;

    min-height:28px;
    margin-bottom:12px;

}

.tool-list li a {

    margin: 0;

    color: #334155;

    text-decoration: none;

    transition: .2s ease;

}


.tool-list li a:hover {

    color: var(--blue);

}



/* Ukryte narzędzia */

.hidden-tools {

    display: none;

}


.category-card.expanded .hidden-tools {

    display: block;

}



/* Przycisk rozwijania */

.expand-category {

    width: auto;

    height: auto;

    margin-top: 18px;

    padding: 10px 18px;

    border-radius: 999px;

    border: 1px solid rgba(59,130,246,.25);

    background: #eff6ff;

    color: var(--blue);

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: .2s ease;

}



.expand-category:hover {

    background: var(--blue);

    color: white;

    transform: translateY(-2px);

}



/* Status Wkrótce */

.coming-soon span {

    font-size: 12px;

    font-weight: 600;

    color: #64748b;

    background: #f1f5f9;

    padding: 4px 10px;

    border-radius: 999px;

}
.category-icon {

    width: 20px;
    height: 20px;
    display:block;
}

.category-icon-box {

    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink: 0;
    border-radius:12px;

     box-shadow:
        0 3px 8px rgba(34,197,94,.10),
        inset 0 1px 0 rgba(255,255,255,.7);

}

.category-health {

    background:linear-gradient(
        135deg,
        #FCE7F3,
        #FBCFE8
    );

    border:1px solid rgba(236,72,153,.18);

}


.category-calculator {

    background:linear-gradient(
        135deg,
         #DBEAFE,
        #BFDBFE
    );

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

}


.category-finance {

    background:linear-gradient(
        135deg,
        #F3E8FF,
        #E9D5FF
    );

    border:1px solid rgba(168,85,247,.20);

}

.category-home {

    background:linear-gradient(
        135deg,
        #FFEDD5,
        #FED7AA
    );

    border:1px solid rgba(249,115,22,.20);

}

.category-time {

    background:linear-gradient(
        135deg,
        #FEF9C3,
        #FDEBB7
    );

    border:1px solid rgba(234,179,8,.18);

}

.category-travel {

    background:linear-gradient(
        135deg,
        #CCFBF1,
        #99F6E4
    );

    border:1px solid rgba(20,184,166,.18);

}

.category-nature {

    background:linear-gradient(
        135deg,
        #DCFCE7,
        #BBF7D0
    );

    border:1px solid rgba(34,197,94,.18);

}

/* ======================================
   FOOTER
====================================== */

.site-footer {

    margin-top:100px;

    padding:60px 24px 35px;

    text-align:center;

    background:
    linear-gradient(
        135deg,
        rgba(59,130,246,.08),
        rgba(16,185,129,.08)
    );

    border-top:1px solid rgba(59,130,246,.12);

    color:var(--light);

}

.site-footer::before {

    content:"";

    display:block;

    width:120px;

    height:4px;

    margin:0 auto 35px;

    border-radius:999px;

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

}

.footer-brand {

    font-size:24px;

    font-weight:700;

    color:var(--text);

    margin-bottom:8px;

}


.footer-motto {

    font-size:15px;

    font-weight:600;

    margin-bottom:12px;

}


.footer-description {

    font-size:14px;

    margin-bottom:25px;

}


.footer-links {

    display:flex;

    justify-content:center;

    gap:24px;

    margin-bottom:25px;

}


.footer-links a {

    color:var(--light);

    text-decoration:none;

    transition:.2s;

}


.footer-links a:hover {

    color:var(--blue);

}


.footer-copy {

    font-size:13px;

}


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


.search-results {

    max-width:720px;

    margin:15px auto 0;

}


.search-result-card {

    display:flex;

    align-items:center;

    gap:15px;

    background:white;

    padding:16px 20px;

    margin-bottom:10px;

    border-radius:18px;

    text-decoration:none;

    color:var(--text);

    box-shadow:
    0 8px 20px rgba(0,0,0,.05);

    transition:.2s ease;

}


.search-result-card:hover {

    transform:translateY(-3px);

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

}



.search-result-icon {

    width:42px;

    height:42px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eff6ff;

    font-size:22px;

}

.search-result-icon img {

    width: 24px;
    height: 24px;
    display: block;

}

.search-result-text h3 {

    font-size:17px;

    margin-bottom:4px;

}



.search-result-text p {

    color:var(--light);

    font-size:14px;

}


.no-results {

    background:white;

    padding:18px;

    border-radius:18px;

    color:var(--light);

    text-align:center;

}

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

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

@media(max-width:768px){
    
    .container {

         padding-top: 90px;

    }
    
    .logo{

    justify-content: flex-start;

}

  .logo-name {

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

  }

   

    .logo-icon {

        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 16px;

    }


   .logo-icon::before {

        width: 40px;
        height: 40px;
        border-radius: 12px;
        top: 6px;
        left: -7px;

}


    .logo-icon::after {

        width: 40px;
        height: 40px;
        border-radius: 12px;
        bottom: -7px;
        right: -7px;

}
   
   .tagline{
        font-size: 16px;
}

   .tagline span{
        font-size: 22px;
}


    .categories {
        grid-template-columns: 1fr;
    }

   .tool-card {
        flex:0 0 230px;
    }


  .carousel-buttons{
        display:none;
    }
}
  
   /* END MOBILE */
  
   @media (hover: hover) and (pointer: fine) {

    .tool-card:hover {

        transform: translateY(-4px);
        border-color: #3B82F6;
        box-shadow:
            0 12px 30px rgba(59,130,246,.15);

    }

}
/* END HOVER DEVICES */