* {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: Inter, "Segoe UI", sans-serif;
            color: #3b3734;
            background: #f5f7fa;
        }

        .page {
            min-height: 100vh;
            padding: 32px 18px;

            background:
                repeating-linear-gradient(
                    90deg,
                    rgba(160,120,80,.08) 0,
                    rgba(160,120,80,.08) 1px,
                    transparent 1px,
                    transparent 5px
                ),
                linear-gradient(
                    to bottom,
                    #fcebd1,
                    #dec9a2
                );
        }

        /*
         * Artists = 900px.
         * Features je záměrně o něco širší kvůli kartám.
         */
        .card {
            max-width: 1080px;
            margin: 0 auto;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0,0,0,.1);
            padding: 34px 30px 42px;
        }

        h1 {
            margin: 0 0 8px;
            text-align: center;
        }

        .intro {
            max-width: 720px;
            margin: 0 auto 18px;
            text-align: center;
            color: #6c655f;
            line-height: 1.55;
        }

        .motto {
            margin: 0 auto 22px;
            text-align: center;
            font-weight: 700;
            color: #4a403a;
        }

        .back {
            text-align: center;
            margin-bottom: 28px;
        }

        .back a {
            color: #3a2f2f;
        }


        /* ---------------------------------------------------------
           FEATURE NAVIGATION
        --------------------------------------------------------- */

        .feature-nav {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 8px;
            margin-bottom: 34px;
        }

        .feature-nav a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            min-height: 70px;
            padding: 10px;

            color: #3b3734;
            text-decoration: none;

            background: #fdfbf9;
            border: 1px solid #ebe5dc;
            border-radius: 10px;

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

        .feature-nav a:hover {
            background: #f7f2ec;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(0,0,0,.06);
        }

        .feature-nav .icon {
            margin-bottom: 4px;
            font-size: 20px;
        }

        .feature-nav strong {
            font-size: 12px;
            letter-spacing: .08em;
        }


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

        .feature-section {
            scroll-margin-top: 20px;
            padding: 30px 0;
            border-top: 1px solid #ebe5dc;
        }

        .feature-section:first-of-type {
            border-top: 0;
        }

        .section-head {
            margin-bottom: 18px;
        }

        .section-label {
            margin-bottom: 5px;

            color: #888;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .1em;
        }

        .section-head h2 {
            margin: 0 0 6px;
            color: #302925;
            font-size: 24px;
        }

        .section-head p {
            max-width: 720px;
            margin: 0;
            color: #6c655f;
            line-height: 1.5;
        }


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

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .feature {
            padding: 16px;

            background: #fff;
            border: 1px solid #ebe5dc;
            border-radius: 10px;
        }

        .feature.featured {
            background: #fdfbf9;
        }

        .feature.wide {
            grid-column: span 2;
        }

        .feature h3 {
            margin: 0 0 7px;
            color: #302925;
            font-size: 15px;
        }

        .feature p {
            margin: 0;
            color: #5f5954;
            font-size: 14px;
            line-height: 1.5;
        }

        .feature ul {
            margin: 10px 0 0;
            padding-left: 18px;
            color: #5f5954;
            font-size: 14px;
            line-height: 1.5;
        }

        .feature-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 11px;
        }

        .feature-tag {
            padding: 3px 8px;

            background: #f2efe9;
            border-radius: 999px;

            color: #5f5954;
            font-size: 12px;
        }


        /* ---------------------------------------------------------
           ENDING
        --------------------------------------------------------- */

        .features-ending {
            margin-top: 28px;
            padding: 30px 20px 4px;

            border-top: 1px solid #ebe5dc;
            text-align: center;
        }

        .features-ending h2 {
            margin: 0 0 9px;
            color: #302925;
            font-size: 25px;
        }

        .features-ending p {
            max-width: 690px;
            margin: 0 auto 10px;

            color: #6c655f;
            line-height: 1.55;
        }

        .features-ending strong {
            color: #3b3734;
        }

        .features-cta {
            display: inline-block;
            margin-top: 12px;
            padding: 9px 14px;

            color: #fff;
            background: #3a2f2f;

            border-radius: 8px;
            text-decoration: none;
            font-weight: 700;
            font-size: 14px;
        }

        .features-cta:hover {
            opacity: .9;
        }


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

        @media (max-width: 850px) {

            .feature-nav {
                grid-template-columns: repeat(3, 1fr);
            }

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

        @media (max-width: 600px) {

            .page {
                padding: 18px 10px;
            }

            .card {
                padding: 26px 16px 32px;
                border-radius: 12px;
            }

            .feature-nav {
                grid-template-columns: repeat(2, 1fr);
            }

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

            .feature.wide {
                grid-column: auto;
            }

            .feature-section {
                padding: 25px 0;
            }
        }