/* =========================================================
           TRAVOCOST
           INTERNATIONAL PHOTOGRAPHY HOMEPAGE
        ========================================================= */

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family:
                Inter,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Arial,
                sans-serif;

            background: #f7f7f5;
            color: #111111;

            line-height: 1.6;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            display: block;
            width: 100%;
        }

        button,
        input,
        select,
        textarea {
            font: inherit;
        }


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

        .header {
            position: sticky;
            top: 0;
            z-index: 1000;

            background: rgba(255,255,255,0.96);

            border-bottom: 1px solid #e9e9e7;

            backdrop-filter: blur(15px);
        }

        .header-inner {
            width: min(1280px, calc(100% - 40px));

            min-height: 74px;

            margin: 0 auto;

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 30px;
        }


        /* LOGO */

        .logo {
            display: inline-flex;

            align-items: center;

            font-size: 25px;

            font-weight: 800;

            letter-spacing: -1.3px;

            white-space: nowrap;
        }

        .logo-main {
            color: #111111;
        }

        .logo-accent {
            color: #1677d2;
        }

        .logo-mark {
            margin-left: 5px;

            color: #1677d2;

            font-size: 21px;
        }


        /* NAVIGATION */

        .nav {
            display: flex;

            align-items: center;

            gap: 30px;
        }

        .nav a {
            color: #555555;

            font-size: 13px;

            font-weight: 600;

            transition: 0.2s ease;
        }

        .nav a:hover {
            color: #1677d2;
        }

        .nav-upload {
            padding: 9px 15px;

            border-radius: 8px;

            background: #111111;

            color: white !important;
        }

        .nav-upload:hover {
            background: #1677d2;
        }


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

        .hero {
            position: relative;

            overflow: hidden;

            background:
                radial-gradient(
                    circle at 85% 15%,
                    rgba(70,150,230,0.30),
                    transparent 30%
                ),
                radial-gradient(
                    circle at 10% 90%,
                    rgba(30,80,130,0.28),
                    transparent 35%
                ),
                linear-gradient(
                    135deg,
                    #071421 0%,
                    #102b43 55%,
                    #155987 100%
                );

            color: white;
        }

        .hero::after {
            content: "";

            position: absolute;

            width: 500px;
            height: 500px;

            right: -250px;
            bottom: -300px;

            border-radius: 50%;

            border: 1px solid rgba(255,255,255,0.08);
        }

        .hero-inner {
            position: relative;

            z-index: 2;

            width: min(1280px, calc(100% - 40px));

            min-height: 590px;

            margin: 0 auto;

            padding: 105px 0 90px;

            display: flex;

            flex-direction: column;

            justify-content: center;
        }

        .hero-label {
            display: inline-flex;

            align-items: center;

            gap: 8px;

            width: fit-content;

            padding: 7px 12px;

            border: 1px solid rgba(255,255,255,0.16);

            border-radius: 999px;

            background: rgba(255,255,255,0.07);

            color: #b9d9ef;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 1.5px;
        }

        .hero-dot {
            width: 6px;
            height: 6px;

            border-radius: 50%;

            background: #4db0ff;
        }

        .hero h1 {
            max-width: 900px;

            margin-top: 25px;

            font-size: clamp(
                48px,
                7vw,
                88px
            );

            line-height: 0.98;

            letter-spacing: -4px;

            font-weight: 800;
        }

        .hero h1 span {
            color: #4db0ff;
        }

        .hero-description {
            max-width: 650px;

            margin-top: 27px;

            color: #c3d3df;

            font-size: 17px;

            line-height: 1.75;
        }

        .hero-actions {
            display: flex;

            flex-wrap: wrap;

            gap: 12px;

            margin-top: 34px;
        }

        .hero-button {
            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-height: 48px;

            padding: 0 20px;

            border-radius: 9px;

            font-size: 13px;

            font-weight: 700;

            transition: 0.2s ease;
        }

        .hero-primary {
            background: white;

            color: #111111;
        }

        .hero-primary:hover {
            transform: translateY(-2px);

            background: #f0f5f8;
        }

        .hero-secondary {
            border: 1px solid rgba(255,255,255,0.20);

            background: rgba(255,255,255,0.08);

            color: white;
        }

        .hero-secondary:hover {
            transform: translateY(-2px);

            background: rgba(255,255,255,0.15);
        }


        /* SEARCH */

        .hero-search {
            width: min(760px, 100%);

            margin-top: 43px;

            padding: 7px;

            display: flex;

            align-items: center;

            background: white;

            border-radius: 11px;

            box-shadow:
                0 20px 50px rgba(0,0,0,0.22);
        }

        .hero-search input {
            flex: 1;

            min-width: 0;

            padding: 13px 15px;

            border: 0;

            outline: 0;

            background: transparent;

            color: #111111;

            font-size: 14px;
        }

        .hero-search input::placeholder {
            color: #929292;
        }

        .hero-search button {
            border: 0;

            padding: 12px 20px;

            border-radius: 8px;

            background: #1677d2;

            color: white;

            font-size: 13px;

            font-weight: 700;

            cursor: pointer;
        }

        .hero-search button:hover {
            background: #0d67bb;
        }


        /* =========================================================
           AD
        ========================================================= */

        .ad {
            width: min(1280px, calc(100% - 40px));

            min-height: 90px;

            margin: 25px auto;

            display: flex;

            align-items: center;

            justify-content: center;

            border: 1px solid #e9e9e7;

            border-radius: 10px;

            background: #ffffff;
        }

        .ad-label {
            color: #aaaaaa;

            font-size: 9px;

            font-weight: 700;

            letter-spacing: 1.3px;
        }


        /* =========================================================
           MAIN
        ========================================================= */

        .main {
            width: min(1280px, calc(100% - 40px));

            margin: 0 auto;

            padding: 70px 0 90px;
        }


        /* =========================================================
           SECTION HEADER
        ========================================================= */

        .section-header {
            margin-bottom: 28px;
        }

        .section-label {
            color: #1677d2;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 1.7px;
        }

        .section-title {
            margin-top: 6px;

            color: #111111;

            font-size: clamp(
                30px,
                4vw,
                46px
            );

            line-height: 1.08;

            letter-spacing: -1.8px;
        }

        .section-description {
            max-width: 600px;

            margin-top: 10px;

            color: #777777;

            font-size: 14px;
        }


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

        .categories {
            margin-bottom: 75px;
        }

        .category-grid {
            display: grid;

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

            gap: 13px;
        }

        .category-card {
            position: relative;

            min-height: 105px;

            padding: 22px;

            display: flex;

            flex-direction: column;

            justify-content: flex-end;

            overflow: hidden;

            border-radius: 12px;

            background:
                linear-gradient(
                    135deg,
                    #111111,
                    #284b65
                );

            color: white;

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;
        }

        .category-card::before {
            content: "";

            position: absolute;

            inset: 0;

            background:
                radial-gradient(
                    circle at 90% 10%,
                    rgba(255,255,255,0.20),
                    transparent 35%
                );
        }

        .category-card:hover {
            transform: translateY(-4px);

            box-shadow:
                0 15px 35px rgba(0,0,0,0.12);
        }

        .category-number {
            position: absolute;

            top: 16px;
            right: 17px;

            color: rgba(255,255,255,0.38);

            font-size: 11px;

            font-weight: 700;
        }

        .category-name {
            position: relative;

            z-index: 2;

            font-size: 15px;

            font-weight: 700;
        }

        .category-arrow {
            position: relative;

            z-index: 2;

            margin-top: 4px;

            color: #a9d7f7;

            font-size: 11px;
        }


        /* =========================================================
           GALLERY
        ========================================================= */

        .gallery {
            margin-top: 10px;
        }

        .gallery-tools {
            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;

            margin-bottom: 25px;
        }

        .gallery-result {
            color: #777777;

            font-size: 13px;
        }

        .gallery-result strong {
            color: #222222;
        }

        .clear-filter {
            color: #1677d2;

            font-size: 12px;

            font-weight: 700;
        }

        .clear-filter:hover {
            text-decoration: underline;
        }


        /* =========================================================
           PHOTO GRID
        ========================================================= */

        .photo-grid {
            display: grid;

            grid-template-columns:
                repeat(3, minmax(0, 1fr));

            gap: 24px;
        }

        .photo-card {
            overflow: hidden;

            border-radius: 12px;

            background: white;

            border: 1px solid #e7e7e5;

            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;
        }

        .photo-card:hover {
            transform: translateY(-5px);

            box-shadow:
                0 18px 45px rgba(0,0,0,0.10);
        }

        .photo-image {
            position: relative;

            aspect-ratio: 4 / 3;

            overflow: hidden;

            background: #eeeeec;
        }

        .photo-image img {
            width: 100%;
            height: 100%;

            object-fit: cover;

            transition:
                transform 0.5s ease;
        }

        .photo-card:hover .photo-image img {
            transform: scale(1.04);
        }

        .photo-category {
            position: absolute;

            left: 13px;
            top: 13px;

            padding: 6px 9px;

            border-radius: 6px;

            background: rgba(255,255,255,0.94);

            color: #1677d2;

            font-size: 9px;

            font-weight: 800;

            letter-spacing: 0.3px;
        }

        .photo-content {
            padding: 17px 17px 18px;
        }

        .photo-title {
            color: #161616;

            font-size: 17px;

            line-height: 1.3;

            font-weight: 750;
        }

        .photo-description {
            margin-top: 7px;

            color: #777777;

            font-size: 12px;

            line-height: 1.55;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            overflow: hidden;
        }

        .photo-tags {
            display: flex;

            flex-wrap: wrap;

            gap: 5px;

            margin-top: 12px;
        }

        .photo-tag {
            padding: 4px 7px;

            border-radius: 5px;

            background: #f2f4f5;

            color: #707070;

            font-size: 9px;

            font-weight: 600;
        }

        .photo-link {
            display: inline-flex;

            margin-top: 13px;

            color: #1677d2;

            font-size: 11px;

            font-weight: 750;
        }

        .photo-link:hover {
            text-decoration: underline;
        }


        /* =========================================================
           EMPTY
        ========================================================= */

        .empty {
            padding: 80px 25px;

            text-align: center;

            border: 1px solid #e7e7e5;

            border-radius: 14px;

            background: white;
        }

        .empty-icon {
            margin-bottom: 12px;

            font-size: 34px;
        }

        .empty h3 {
            font-size: 21px;
        }

        .empty p {
            margin-top: 6px;

            color: #777777;

            font-size: 13px;
        }


        /* =========================================================
           CONTRIBUTE
        ========================================================= */

        .contribute {
            margin-top: 30px;

            padding: 80px 0;

            background:
                radial-gradient(
                    circle at 90% 15%,
                    rgba(66,155,230,0.22),
                    transparent 32%
                ),
                linear-gradient(
                    135deg,
                    #071421,
                    #123652
                );

            color: white;
        }

        .contribute-inner {
            width: min(1280px, calc(100% - 40px));

            margin: 0 auto;

            display: grid;

            grid-template-columns:
                1.2fr 0.8fr;

            gap: 80px;

            align-items: center;
        }

        .contribute-label {
            color: #56b2f4;

            font-size: 10px;

            font-weight: 800;

            letter-spacing: 1.7px;
        }

        .contribute h2 {
            max-width: 700px;

            margin-top: 10px;

            font-size: clamp(
                34px,
                5vw,
                58px
            );

            line-height: 1.03;

            letter-spacing: -2.5px;
        }

        .contribute p {
            max-width: 590px;

            margin-top: 18px;

            color: #b7cbd9;

            font-size: 15px;

            line-height: 1.75;
        }

        .contribute-button {
            display: inline-flex;

            align-items: center;

            justify-content: center;

            margin-top: 30px;

            min-height: 48px;

            padding: 0 20px;

            border-radius: 8px;

            background: white;

            color: #111111;

            font-size: 13px;

            font-weight: 750;

            transition: 0.2s ease;
        }

        .contribute-button:hover {
            transform: translateY(-2px);

            background: #edf5fa;
        }


        /* SIDE CARD */

        .community-card {
            padding: 30px;

            border: 1px solid rgba(255,255,255,0.12);

            border-radius: 15px;

            background: rgba(255,255,255,0.06);
        }

        .community-card-icon {
            font-size: 31px;

            margin-bottom: 18px;
        }

        .community-card h3 {
            font-size: 20px;
        }

        .community-card p {
            margin-top: 9px;

            color: #b7cbd9;

            font-size: 13px;
        }


        /* =========================================================
           FINAL CTA
        ========================================================= */

        .final-cta {
            padding: 90px 20px;

            text-align: center;

            background: white;
        }

        .final-cta h2 {
            font-size: clamp(
                32px,
                5vw,
                52px
            );

            line-height: 1.05;

            letter-spacing: -2px;
        }

        .final-cta p {
            max-width: 590px;

            margin: 15px auto 25px;

            color: #777777;

            font-size: 14px;
        }

        .final-button {
            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-height: 46px;

            padding: 0 20px;

            border-radius: 8px;

            background: #1677d2;

            color: white;

            font-size: 13px;

            font-weight: 700;
        }

        .final-button:hover {
            background: #0d67bb;
        }


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

        .footer {
            padding: 55px 20px 25px;

            background: #071421;

            color: white;
        }

        .footer-inner {
            width: min(1280px, 100%);

            margin: 0 auto;
        }

        .footer-top {
            display: grid;

            grid-template-columns:
                1.5fr 1fr 1fr;

            gap: 50px;

            padding-bottom: 40px;
        }

        .footer-logo {
            display: inline-flex;

            align-items: center;

            margin-bottom: 14px;

            font-size: 25px;

            font-weight: 800;

            letter-spacing: -1px;
        }

        .footer-logo .logo-main {
            color: white;
        }

        .footer-logo .logo-accent {
            color: #3fa6eb;
        }

        .footer-description {
            max-width: 390px;

            color: #8fa2b0;

            font-size: 13px;

            line-height: 1.7;
        }

        .footer-column h4 {
            margin-bottom: 13px;

            color: white;

            font-size: 12px;

            text-transform: uppercase;

            letter-spacing: 1px;
        }

        .footer-column a {
            display: block;

            margin-bottom: 8px;

            color: #9dafbb;

            font-size: 12px;
        }

        .footer-column a:hover {
            color: white;
        }

        .footer-bottom {
            padding-top: 22px;

            border-top: 1px solid rgba(255,255,255,0.08);

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;

            color: #718390;

            font-size: 11px;
        }


        /* =========================================================
           TABLET
        ========================================================= */

        @media (max-width: 950px) {

            .category-grid {
                grid-template-columns:
                    repeat(3, minmax(0, 1fr));
            }

            .photo-grid {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }

            .contribute-inner {
                grid-template-columns: 1fr;

                gap: 40px;
            }

            .footer-top {
                grid-template-columns:
                    1.5fr 1fr;
            }

        }


        /* =========================================================
           MOBILE
        ========================================================= */

        @media (max-width: 650px) {

            .header-inner {
                width: calc(100% - 28px);

                min-height: 68px;

                gap: 12px;
            }

            .logo {
                font-size: 22px;
            }

            .nav {
                gap: 15px;

                overflow-x: auto;

                padding-bottom: 2px;
            }

            .nav a {
                white-space: nowrap;

                font-size: 11px;
            }

            .nav a:nth-child(4) {
                display: none;
            }

            .nav-upload {
                padding: 7px 11px;
            }


            /* HERO */

            .hero-inner {
                width: calc(100% - 28px);

                min-height: 570px;

                padding: 70px 0 65px;
            }

            .hero h1 {
                font-size: 51px;

                letter-spacing: -2.5px;
            }

            .hero-description {
                font-size: 14px;
            }

            .hero-actions {
                flex-direction: column;

                align-items: stretch;
            }

            .hero-button {
                width: 100%;
            }

            .hero-search {
                margin-top: 30px;
            }

            .hero-search button {
                padding-left: 15px;

                padding-right: 15px;
            }


            /* ADS */

            .ad {
                width: calc(100% - 28px);

                min-height: 70px;

                margin: 18px auto;
            }


            /* MAIN */

            .main {
                width: calc(100% - 28px);

                padding: 55px 0 65px;
            }


            /* CATEGORIES */

            .category-grid {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));

                gap: 9px;
            }

            .category-card {
                min-height: 100px;

                padding: 17px;
            }

            .category-name {
                font-size: 13px;
            }


            /* GALLERY */

            .gallery-tools {
                align-items: flex-start;

                flex-direction: column;

                gap: 8px;
            }

            .photo-grid {
                grid-template-columns: 1fr;

                gap: 17px;
            }


            /* CONTRIBUTE */

            .contribute {
                padding: 65px 0;
            }

            .contribute-inner {
                width: calc(100% - 28px);
            }

            .community-card {
                padding: 23px;
            }


            /* FOOTER */

            .footer {
                padding: 45px 14px 22px;
            }

            .footer-top {
                grid-template-columns: 1fr;

                gap: 30px;
            }

            .footer-bottom {
                align-items: flex-start;

                flex-direction: column;
            }

        }