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

:root {

    --background: #f7f7f5;

    --surface: #ffffff;

    --dark: #151515;

    --dark-soft: #1d1d1d;

    --text: #171717;

    --text-secondary: #686868;

    --text-muted: #999999;

    --border: #deded9;

    --border-light: #eeeeea;

    --blue: #2563eb;

    --blue-light: #dbeafe;

    --blue-dark: #1d4ed8;

    --accent: #5b5ce2;

    --accent-soft: #eeeeff;

    --max-width: 1150px;

}



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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    background: var(--background);

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.5;

}


a {

    color: inherit;

    text-decoration: none;

}


button,
input,
textarea,
select {

    font: inherit;

}



/* =========================================
   CONTAINER
========================================= */

.container {

    width: min(
        calc(100% - 12vw),
        var(--max-width)
    );

    margin: 0 auto;

}



/* =========================================
   NAVIGATION
========================================= */

.navbar {

    height: 84px;

    padding: 0 6vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    background: rgba(
        247,
        247,
        245,
        0.92
    );

    backdrop-filter: blur(12px);

    position: relative;

    z-index: 10;

}


.logo {

    display: flex;

    align-items: center;

    gap: 12px;

}


.logo-mark {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: var(--dark);

    color: white;

    font-size: 14px;

    font-weight: 700;

}


.logo-text {

    display: flex;

    flex-direction: column;

    line-height: 1.15;

}


.logo-text strong {

    font-size: 14px;

    letter-spacing: -0.2px;

}


.logo-text span {

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 9px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.7px;

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 30px;

    color: var(--text-secondary);

    font-size: 13px;

}


.nav-links a {

    transition:
        color 0.2s ease;

}


.nav-links a:hover {

    color: var(--text);

}



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

.hero {

    min-height:
        calc(100vh - 84px);

    padding:
        90px 6vw 100px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

}


.hero-background {

    position: absolute;

    width: 700px;

    height: 700px;

    right: -220px;

    top: -240px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(
                91,
                92,
                226,
                0.12
            ),
            transparent 68%
        );

    pointer-events: none;

}


.hero-content {

    width: 100%;

    max-width: var(--max-width);

    margin: 0 auto;

    position: relative;

    z-index: 2;

}


.hero-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 28px;

    padding:
        7px 11px;

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

    border-radius: 30px;

    background: var(--surface);

    color: var(--text-secondary);

    font-size: 11px;

    font-weight: 600;

}


.hero-label-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--accent);

}


.hero h1 {

    max-width: 900px;

    margin-bottom: 30px;

    font-size:
        clamp(
            52px,
            8vw,
            96px
        );

    line-height: 0.94;

    letter-spacing: -5px;

    font-weight: 700;

}


.hero h1 span {

    color: #6b6b6b;

    font-weight: 400;

}


.hero-description {

    max-width: 650px;

    margin-bottom: 40px;

    color: var(--text-secondary);

    font-size: 18px;

    line-height: 1.65;

}



/* =========================================
   BUTTONS
========================================= */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 70px;

}


.button {

    min-height: 50px;

    padding:
        0 19px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 9px;

    font-size: 13px;

    font-weight: 600;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;

}


.button:hover {

    transform: translateY(-2px);

}


.button-primary {

    background: var(--dark);

    color: white;

}


.button-primary:hover {

    background: #303030;

}


.button-secondary {

    border: 1px solid #d6d6d1;

    background: white;

    color: var(--text);

}


.button-secondary:hover {

    border-color: #aaa;

}


.button-arrow {

    font-size: 16px;

}



/* =========================================
   STATISTICS
========================================= */

.stats {

    max-width: 850px;

    display: grid;

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

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

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

}


.stat {

    padding:
        22px 20px 22px 0;

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

}


.stat:not(:first-child) {

    padding-left: 20px;

}


.stat:last-child {

    border-right: none;

}


.stat strong {

    display: block;

    margin-bottom: 3px;

    font-size: 26px;

    line-height: 1;

    letter-spacing: -1px;

}


.stat span {

    color: var(--text-muted);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 0.7px;

}



/* =========================================
   ABOUT
========================================= */

.about {

    padding:
        110px 0;

    background: var(--dark);

    color: white;

}


.about-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 80px;

}


.section-label {

    display: block;

    margin-bottom: 17px;

    color: #858585;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.about-heading h2 {

    max-width: 500px;

    font-size: 38px;

    line-height: 1.1;

    letter-spacing: -1.5px;

}


.about-description {

    padding-top: 30px;

}


.about-description p {

    max-width: 500px;

    margin-bottom: 20px;

    color: #a4a4a4;

    font-size: 14px;

    line-height: 1.8;

}



/* =========================================
   FEATURES
========================================= */

.features {

    display: grid;

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

    gap: 12px;

    margin-top: 70px;

}


.feature {

    padding: 24px;

    border: 1px solid #303030;

    border-radius: 12px;

    background: var(--dark-soft);

}


.feature-number {

    display: block;

    margin-bottom: 0;

    color: #777;

    font-size: 11px;

}


.feature h3 {

    margin-bottom: 9px;

    font-size: 15px;

}


.feature p {

    color: #858585;

    font-size: 12px;

    line-height: 1.65;

}



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

footer {

    padding:
        25px 0;

    background: #101010;

    color: #666;

    font-size: 11px;

}


.footer-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



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

@media (max-width: 800px) {


    .navbar {

        padding: 0 5vw;

    }


    .nav-links {

        display: none;

    }


    .hero {

        padding:
            70px 5vw 80px;

    }


    .hero h1 {

        font-size: 58px;

        letter-spacing: -3px;

    }


    .hero-description {

        font-size: 16px;

    }


    .stats {

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

    }


    .stat {

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

    }


    .stat:nth-child(2) {

        border-right: none;

    }


    .stat:nth-child(3),
    .stat:nth-child(4) {

        border-bottom: none;

    }


    .about {

        padding:
            80px 0;

    }


    .about-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .about-description {

        padding-top: 0;

    }


    .features {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 500px) {


    .hero h1 {

        font-size: 47px;

        letter-spacing: -2.5px;

    }


    .hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .button {

        width: 100%;

    }


    .stats {

        grid-template-columns: 1fr;

    }


    .stat {

        border-right: none;

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

    }


    .stat:not(:first-child) {

        padding-left: 0;

    }


    .stat:last-child {

        border-bottom: none;

    }


    .footer-content {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

    }

}

/* =========================================
   EXPLORE PAGE
========================================= */

        .explore-page {

            min-height: 100vh;

            padding: 70px 6vw 90px;

            background: var(--background);

        }


        .explore-container {

            width: min(
                100%,
                var(--max-width)
            );

            margin: 0 auto;

        }


        .explore-header {

            margin-bottom: 35px;

        }


        .explore-label {

            display: inline-block;

            margin-bottom: 14px;

            color: var(--blue);

            font-size: 11px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1px;

        }


        .explore-header h1 {

            margin-bottom: 15px;

            color: var(--dark);

            font-size: clamp(
                40px,
                6vw,
                64px
            );

            line-height: 1;

            letter-spacing: -3px;

        }


        .explore-header p {

            max-width: 650px;

            color: var(--text-secondary);

            font-size: 16px;

            line-height: 1.7;

        }


        .airtable-wrapper {

            width: 100%;

            overflow: hidden;

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

            border-radius: 14px;

            background: white;

            box-shadow:
                0 10px 40px
                rgba(71, 88, 140, 0.08);

        }


        .airtable-wrapper iframe {

            display: block;

            width: 100%;

            min-height: 800px;

            border: 0;

        }


        @media (max-width: 700px) {

            .explore-page {

                padding:
                    50px 5vw 70px;

            }


            .explore-header h1 {

                font-size: 45px;

                letter-spacing: -2px;

            }


            .airtable-wrapper iframe {

                min-height: 650px;

            }

        }


/* =========================================
   SUBMIT PAGE
========================================= */

/* =========================================
   CREATE PAGE
========================================= */

.create-page {

    min-height: 100vh;

    padding: 75px 6vw 100px;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(139, 108, 246, 0.08),
            transparent 30%
        ),
        var(--background);

}


.create-container {

    width: min(
        100%,
        900px
    );

    margin: 0 auto;

}


.create-header {

    margin-bottom: 55px;

}


.create-label {

    display: inline-block;

    margin-bottom: 15px;

    color: var(--blue);

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

}


.create-header h1 {

    margin-bottom: 18px;

    color: var(--dark);

    font-size:
        clamp(
            42px,
            6vw,
            68px
        );

    line-height: 1;

    letter-spacing: -3px;

}


.create-header p {

    max-width: 620px;

    color: var(--text-secondary);

    font-size: 16px;

    line-height: 1.7;

}



/* =========================================
   FORM SECTION
========================================= */

.form-section {

    margin-bottom: 10px;

    padding: 10px;

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

    border-radius: 10px;

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

    box-shadow:
        0 8px 30px
        rgba(71, 88, 140, 0.04);

}


.form-section-header {

    margin-bottom: 15px;

    padding-bottom: 20px;

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

}


.form-section-header h2 {

    margin-bottom: 7px;

    color: var(--dark);

    font-size: 20px;

    letter-spacing: -0.5px;

}


.form-section-header p {

    color: var(--text-secondary);

    font-size: 12px;

}



/* =========================================
   FORM FIELDS
========================================= */

.form-fields {

    display: grid;

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

    gap: 24px 20px;

}


.form-field {

    display: flex;

    flex-direction: column;

}


.form-field:has(textarea),
.form-field:has(.multiselect),
.form-field:has(.pills-container),
.form-field:has(.table-wrapper),
.form-field[data-show-if] {

    grid-column: 1 / -1;

}


.form-field > label {

    margin-bottom: 8px;

    color: var(--dark);

    font-size: 12px;

    font-weight: 600;

}


.form-field input,
.form-field select,
.form-field textarea {

    width: 100%;

    padding:
        11px 13px;

    border:
        1px solid #d9dfec;

    border-radius: 8px;

    outline: none;

    background: white;

    color: var(--dark);

    font-size: 13px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.form-field textarea {

    resize: vertical;

    min-height: 110px;

}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

    border-color: var(--blue);

    box-shadow:
        0 0 0 3px
        rgba(71, 114, 255, 0.10);

}


.form-field input::placeholder,
.form-field textarea::placeholder {

    color: #b0b7c5;

}


.form-field-checkbox {

    flex-direction: row;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

}


.form-field-checkbox > label {

    margin-bottom: 0;

    order: 2;

}


.form-field-checkbox input[type="checkbox"] {

    width: auto;

    order: 1;

}


.form-field-checkbox > .field-help {

    order: 3;

    flex-basis: 100%;

    margin: 0;

}


.form-field-markdown {

    margin: 0;

    padding: 0;

}


.form-field-markdown > div {

    color: var(--dark);

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 2px;

}


.pills-container {

    display: flex;

    flex-wrap: wrap;

    gap: 2px;

    padding: 2px;

    border: 1px solid #d9dfec;

    border-radius: 8px;

    background: white;

    align-items: center;

    position: relative;

}


.pills-display {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    flex: 1;

}


.pill {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 12px;

    background: #f0f3f9;

    border: 1px solid #d9dfec;

    border-radius: 20px;

    font-size: 13px;

    color: var(--dark);

}


.pill-remove {

    background: none;

    border: none;

    font-size: 16px;

    cursor: pointer;

    padding: 0;

    margin-left: 4px;

    color: #999;

}


.pill-remove:hover {

    color: var(--dark);

}


.pills-add-button {

    background: none;

    border: none;

    font-size: 18px;

    cursor: pointer;

    color: #999;

    padding: 0;

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.pills-add-button:hover {

    color: var(--dark);

}


.pills-menu {

    position: absolute;

    background: white;

    border: 1px solid #d9dfec;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    z-index: 10;

    min-width: 200px;

}


.pills-menu-item {

    display: block;

    width: 100%;

    padding: 10px 12px;

    border: none;

    background: none;

    text-align: left;

    font-size: 13px;

    color: var(--dark);

    cursor: pointer;

}


.pills-menu-item:hover {

    background: #f0f3f9;

}



/* =========================================
   TABLE
========================================= */

.table-wrapper {

    overflow-x: auto;

}


.data-table {

    width: 100%;

    border-collapse: collapse;

    border: 1px solid #d9dfec;

    border-radius: 8px;

    overflow: hidden;

}


.data-table thead {

    background: #f8fafc;

}


.data-table th {

    padding: 10px 12px;

    text-align: left;

    font-weight: 600;

    font-size: 12px;

    color: var(--dark);

    border-bottom: 1px solid #d9dfec;

}


.data-table td {

    padding: 8px 12px;

    border-bottom: 1px solid #e8ecf5;

}


.table-cell-input {

    width: 100%;

    padding: 6px 8px;

    border: 1px solid #d9dfec;

    border-radius: 4px;

    outline: none;

    background: white;

    color: var(--dark);

    font-size: 13px;

    font-family: inherit;

    box-sizing: border-box;

}


.table-cell-input:focus {

    border-color: var(--blue);

    box-shadow: 0 0 0 3px rgba(71, 114, 255, 0.1);

}


.table-last-cell-inner {

    display: flex;

    align-items: center;

    gap: 8px;

}


.table-last-cell-inner .table-cell-input {

    flex: 1;

}


.table-delete-button {

    width: 24px;

    height: 24px;

    border: 1px solid #d9dfec;

    border-radius: 50%;

    background: white;

    color: #7b879c;

    font-size: 14px;

    line-height: 1;

    cursor: pointer;

    flex-shrink: 0;

}


.table-delete-button:hover {

    color: #dc2626;

    border-color: #fecaca;

    background: #fff1f2;

}


.table-add-row td {

    padding: 8px 12px;

    border-bottom: none;

}


.table-add-button {

    background: none;

    border: none;

    color: var(--blue);

    font-size: 13px;

    font-weight: 500;

    cursor: pointer;

    padding: 6px 0;

}


.table-add-button:hover {

    text-decoration: underline;

}



/* =========================================
   MULTISELECT
========================================= */

.multiselect {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}


.choice {

    position: relative;

    display: inline-flex;

    align-items: center;

}


.choice input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.choice span {

    display: block;

    padding:
        8px 12px;

    border:
        1px solid #d9dfec;

    border-radius: 7px;

    background: white;

    color: var(--text-secondary);

    font-size: 12px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;

}


.choice input:checked + span {

    border-color: var(--blue);

    background: var(--blue-light);

    color: var(--blue-dark);

}


.choice span:hover {

    border-color: #b9c4db;

}



/* =========================================
   HELP
========================================= */

.field-help {

    margin-top: 8px;

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.5;

}


/* =========================================
   REPEATABLE SECTIONS
========================================= */

.repeatable-entries {

    display: flex;

    flex-direction: column;

    gap: 16px;

}


.repeatable-entry {

    border: 1px solid #e8ecf5;

    border-radius: 10px;

    padding: 16px;

    background: #fbfcff;

}


.repeatable-entry-actions {

    display: flex;

    justify-content: flex-end;

    margin-top: 12px;

}


.repeatable-remove-button,
.repeatable-add-button {

    border: 1px solid #d9dfec;

    border-radius: 8px;

    background: white;

    color: var(--dark);

    font-size: 12px;

    padding: 8px 12px;

    cursor: pointer;

}


.repeatable-remove-button:disabled {

    opacity: 0.5;

    cursor: not-allowed;

}


.repeatable-add-wrap {

    margin-top: 14px;

}


.repeatable-add-button {

    color: var(--blue);

    border-color: #cfd9ff;

    background: #f6f8ff;

}



/* =========================================
   SUBMISSION
========================================= */

.form-submit {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 35px;

}


.turnstile-wrap {

    min-height: 64px;

}


.form-submit .button {

    border: none;

    cursor: pointer;

}


.form-submit .button.is-incomplete {

    opacity: 0.6;

}


.form-message {

    margin-top: 15px;

    padding: 12px 15px;

    border-radius: 8px;

    font-size: 12px;

    display: none;

}


.form-message p {

    line-height: 1.6;

}


.form-message p + p {

    margin-top: 10px;

}


.form-message a {

    color: inherit;

    font-weight: 600;

    text-decoration: underline;

}


.form-message.success {

    display: block;

    background: #eaf8f0;

    color: #26734d;

    border:
        1px solid #c9ead8;

}


.form-message.pending {

    display: block;

    background: #f0f3f9;

    color: #4a5568;

    border:
        1px solid #d9dfec;

}


    .form-message.error {

        display: block;

        background: #fff0f0;

        color: #a33;

        border:
        1px solid #f2cccc;

    }


.form-error {

    padding: 20px;

    border-radius: 10px;

    background: #fff0f0;

    border:
        1px solid #f2cccc;

    color: #a33;

    font-size: 13px;

}



/* =========================================
   RATING
========================================= */

.rating-stars {

    display: flex;

    flex-direction: row-reverse;

    justify-content: flex-end;

    gap: 4px;

}


.rating-stars input {

    position: absolute;

    opacity: 0;

    width: 0;

    height: 0;

}


.rating-stars label {

    font-size: 26px;

    line-height: 1;

    color: #d9dfec;

    cursor: pointer;

    transition: color 0.15s ease;

}


.rating-stars label:hover,

.rating-stars label:hover ~ label,

.rating-stars input:checked ~ label {

    color: #f5b942;

}



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

@media (max-width: 700px) {

    .create-page {

        padding:
            50px 5vw 70px;

    }


    .form-fields {

        grid-template-columns: 1fr;

    }


    .form-section {

        padding: 22px;

    }


    .form-field:has(textarea),
    .form-field:has(.multiselect) {

        grid-column: auto;

    }


    .form-submit {

        justify-content: stretch;

    }


    .form-submit .button {

        width: 100%;

    }

}