/* ============================================================
   FREDELIN AI VÍDEO
   style.css
   Design principal da plataforma
============================================================ */


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

* {
    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:
        linear-gradient(
            180deg,
            #f8faff 0%,
            #ffffff 45%,
            #f5f7ff 100%
        );

    color: #172033;

    line-height: 1.6;

    min-height: 100vh;
}


/* ============================================================
   VARIÁVEIS
============================================================ */

:root {

    --primary: #635bff;

    --primary-dark: #4b43d6;

    --secondary: #8b5cf6;

    --accent: #06b6d4;

    --dark: #111827;

    --text: #172033;

    --muted: #667085;

    --white: #ffffff;

    --light: #f5f7ff;

    --border: #e4e7ec;

    --success: #16a34a;

    --danger: #dc2626;

    --shadow:
        0 20px 60px rgba(31, 41, 55, 0.10);

    --shadow-small:
        0 8px 25px rgba(31, 41, 55, 0.08);

    --radius: 18px;

    --radius-large: 28px;

}


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

header {

    position: sticky;

    top: 0;

    z-index: 1000;

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

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(228, 231, 236, 0.8);

}


.navbar {

    max-width: 1200px;

    margin: 0 auto;

    min-height: 76px;

    padding:
        0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


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

.logo {

    font-size: 21px;

    font-weight: 900;

    letter-spacing: -0.7px;

    color: var(--dark);

    white-space: nowrap;

}


.logo span {

    color: var(--primary);

}


/* ============================================================
   NAV
============================================================ */

nav {

    display: flex;

    align-items: center;

    gap: 8px;

}


nav a {

    text-decoration: none;

    color: #475467;

    font-size: 14px;

    font-weight: 600;

    padding:
        9px 13px;

    border-radius: 10px;

    transition:
        all 0.25s ease;

}


nav a:hover {

    color: var(--primary);

    background:
        #f1f0ff;

}


/* ============================================================
   BOTÕES DO HEADER
============================================================ */

nav .btn-login {

    color: var(--primary);

    border:
        1px solid #d9d6ff;

}


nav .btn-login:hover {

    background:
        #f4f3ff;

}


nav .btn-account {

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    padding:
        10px 17px;

    box-shadow:
        0 8px 20px rgba(99, 91, 255, 0.25);

}


nav .btn-account:hover {

    color: white;

    transform:
        translateY(-1px);

    box-shadow:
        0 12px 25px rgba(99, 91, 255, 0.35);

}


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

.hero {

    max-width: 1200px;

    margin: 0 auto;

    padding:
        100px 24px
        85px;

    text-align: center;

}


.badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        8px 15px;

    margin-bottom: 25px;

    border-radius: 999px;

    background:
        #f0efff;

    border:
        1px solid #ddd9ff;

    color:
        var(--primary);

    font-size: 13px;

    font-weight: 700;

}


.hero h1 {

    max-width: 850px;

    margin:
        0 auto 22px;

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

    line-height: 1.05;

    letter-spacing:
        -3px;

    font-weight: 900;

    color:
        var(--dark);

}


.hero h1 span {

    display: inline-block;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary),
            var(--accent)
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero > p {

    max-width: 700px;

    margin:
        0 auto 38px;

    color:
        var(--muted);

    font-size:
        18px;

    line-height:
        1.7;

}


/* ============================================================
   CAIXA DE CRIAÇÃO
============================================================ */

.create-box {

    max-width:
        850px;

    margin:
        0 auto;

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

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

    border-radius:
        var(--radius-large);

    padding:
        10px;

    box-shadow:
        var(--shadow);

    text-align:
        left;

}


.create-box textarea {

    width:
        100%;

    min-height:
        150px;

    resize:
        vertical;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    padding:
        22px;

    font-family:
        inherit;

    font-size:
        16px;

    line-height:
        1.6;

    color:
        var(--dark);

}


.create-box textarea::placeholder {

    color:
        #98a2b3;

}


.create-box textarea:focus {

    outline:
        none;

}


/* ============================================================
   FOOTER DA CRIAÇÃO
============================================================ */

.create-footer {

    min-height:
        65px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        10px 14px 10px 20px;

    border-top:
        1px solid #eef0f4;

}


.create-footer small {

    color:
        var(--muted);

    font-size:
        13px;

}


/* ============================================================
   BOTÃO PRINCIPAL
============================================================ */

.btn-create {

    border:
        0;

    outline:
        none;

    cursor:
        pointer;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    padding:
        13px 21px;

    border-radius:
        12px;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        800;

    box-shadow:
        0 10px 25px rgba(99, 91, 255, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;

}


.btn-create:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 30px rgba(99, 91, 255, 0.35);

}


.btn-create:active {

    transform:
        translateY(0);

}


.btn-create:disabled {

    opacity:
        0.6;

    cursor:
        not-allowed;

    transform:
        none;

}


/* ============================================================
   SEÇÕES
============================================================ */

.section {

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        85px 24px;

}


.section-title {

    text-align:
        center;

    margin-bottom:
        48px;

}


.section-title h2 {

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

    line-height:
        1.15;

    letter-spacing:
        -1.5px;

    color:
        var(--dark);

    margin-bottom:
        12px;

}


.section-title p {

    color:
        var(--muted);

    font-size:
        16px;

}


/* ============================================================
   MODELOS
============================================================ */

.models {

    display:
        grid;

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

    gap:
        20px;

}


.model {

    position:
        relative;

    padding:
        28px 22px;

    min-height:
        190px;

    background:
        #ffffff;

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

    border-radius:
        var(--radius);

    cursor:
        pointer;

    box-shadow:
        var(--shadow-small);

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

    overflow:
        hidden;

}


.model::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform 0.3s ease;

}


.model:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 18px 40px rgba(31, 41, 55, 0.13);

    border-color:
        #d4d0ff;

}


.model:hover::before {

    transform:
        scaleX(1);

}


.model-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        17px;

    border-radius:
        15px;

    background:
        #f3f2ff;

    font-size:
        27px;

}


.model h3 {

    font-size:
        17px;

    margin-bottom:
        7px;

    color:
        var(--dark);

}


.model p {

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.5;

}


/* ============================================================
   COMO FUNCIONA
============================================================ */

.steps {

    display:
        grid;

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

    gap:
        25px;

}


.step {

    text-align:
        center;

    padding:
        25px 18px;

}


.step-number {

    width:
        58px;

    height:
        58px;

    margin:
        0 auto 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:
        white;

    font-size:
        20px;

    font-weight:
        900;

    box-shadow:
        0 10px 25px rgba(99, 91, 255, 0.25);

}


.step h3 {

    font-size:
        17px;

    color:
        var(--dark);

    margin-bottom:
        8px;

}


.step p {

    color:
        var(--muted);

    font-size:
        14px;

}


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

.cta {

    max-width:
        1150px;

    margin:
        50px auto 90px;

    padding:
        70px 30px;

    text-align:
        center;

    border-radius:
        32px;

    background:
        linear-gradient(
            135deg,
            #15152b,
            #302b63,
            #44358b
        );

    color:
        white;

    box-shadow:
        0 25px 60px rgba(31, 41, 55, 0.20);

}


.cta h2 {

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

    line-height:
        1.1;

    letter-spacing:
        -1.5px;

    margin-bottom:
        14px;

}


.cta p {

    max-width:
        650px;

    margin:
        0 auto 28px;

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

    font-size:
        16px;

}


.cta .btn-create {

    background:
        white;

    color:
        var(--primary);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.20);

}


.cta .btn-create:hover {

    background:
        #f8f8ff;

}


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

footer {

    padding:
        35px 24px;

    text-align:
        center;

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

    background:
        #ffffff;

}


footer p {

    color:
        #98a2b3;

    font-size:
        13px;

}


/* ============================================================
   ANIMAÇÕES
============================================================ */

@keyframes aparecer {

    from {

        opacity:
            0;

        transform:
            translateY(20px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.hero > * {

    animation:
        aparecer 0.7s ease both;

}


.hero .badge {

    animation-delay:
        0.05s;

}


.hero h1 {

    animation-delay:
        0.12s;

}


.hero > p {

    animation-delay:
        0.18s;

}


.create-box {

    animation-delay:
        0.25s;

}


/* ============================================================
   SELEÇÃO
============================================================ */

::selection {

    background:
        #dcd9ff;

    color:
        var(--dark);

}


/* ============================================================
   SCROLLBAR
============================================================ */

::-webkit-scrollbar {

    width:
        9px;

}


::-webkit-scrollbar-track {

    background:
        #f1f3f7;

}


::-webkit-scrollbar-thumb {

    background:
        #c7c9d4;

    border-radius:
        20px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        #9fa3b3;

}


/* ============================================================
   RESPONSIVIDADE — TABLET
============================================================ */

@media (max-width: 1000px) {

    .navbar {

        padding:
            0 20px;

    }


    nav a:not(.btn-login):not(.btn-account) {

        display:
            none;

    }


    .models {

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

    }


    .steps {

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

    }


    .hero {

        padding:
            80px 20px
            70px;

    }


    .section {

        padding:
            70px 20px;

    }


    .cta {

        margin:
            40px 20px 70px;

    }

}


/* ============================================================
   RESPONSIVIDADE — CELULAR
============================================================ */

@media (max-width: 650px) {

    body {

        overflow-x:
            hidden;

    }


    /* --------------------------------------------------------
       HEADER
    -------------------------------------------------------- */

    .navbar {

        min-height:
            68px;

        padding:
            0 16px;

        gap:
            10px;

    }


    .logo {

        font-size:
            17px;

    }


    nav {

        gap:
            5px;

    }


    nav .btn-login,
    nav .btn-account {

        font-size:
            12px;

        padding:
            8px 10px;

    }


    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .hero {

        padding:
            65px 16px
            55px;

    }


    .badge {

        font-size:
            11px;

        padding:
            7px 11px;

        margin-bottom:
            20px;

    }


    .hero h1 {

        font-size:
            42px;

        letter-spacing:
            -2px;

    }


    .hero > p {

        font-size:
            15px;

        line-height:
            1.6;

        margin-bottom:
            28px;

    }


    /* --------------------------------------------------------
       CREATE BOX
    -------------------------------------------------------- */

    .create-box {

        border-radius:
            20px;

        padding:
            7px;

    }


    .create-box textarea {

        min-height:
            135px;

        padding:
            17px;

        font-size:
            15px;

    }


    .create-footer {

        flex-direction:
            column;

        align-items:
            stretch;

        padding:
            12px;

        gap:
            12px;

    }


    .create-footer small {

        text-align:
            center;

        font-size:
            12px;

    }


    .btn-create {

        width:
            100%;

        padding:
            14px 18px;

    }


    /* --------------------------------------------------------
       SEÇÕES
    -------------------------------------------------------- */

    .section {

        padding:
            55px 16px;

    }


    .section-title {

        margin-bottom:
            30px;

    }


    .section-title h2 {

        font-size:
            30px;

        letter-spacing:
            -1px;

    }


    .section-title p {

        font-size:
            14px;

    }


    /* --------------------------------------------------------
       MODELOS
    -------------------------------------------------------- */

    .models {

        grid-template-columns:
            1fr 1fr;

        gap:
            12px;

    }


    .model {

        min-height:
            175px;

        padding:
            20px 16px;

        border-radius:
            16px;

    }


    .model-icon {

        width:
            47px;

        height:
            47px;

        font-size:
            23px;

        margin-bottom:
            13px;

    }


    .model h3 {

        font-size:
            15px;

    }


    .model p {

        font-size:
            12px;

    }


    /* --------------------------------------------------------
       ETAPAS
    -------------------------------------------------------- */

    .steps {

        grid-template-columns:
            1fr;

        gap:
            5px;

    }


    .step {

        padding:
            20px 10px;

    }


    .step-number {

        width:
            52px;

        height:
            52px;

        font-size:
            18px;

        margin-bottom:
            15px;

    }


    /* --------------------------------------------------------
       CTA
    -------------------------------------------------------- */

    .cta {

        margin:
            25px 16px 55px;

        padding:
            50px 20px;

        border-radius:
            25px;

    }


    .cta h2 {

        font-size:
            31px;

    }


    .cta p {

        font-size:
            14px;

    }


    /* --------------------------------------------------------
       FOOTER
    -------------------------------------------------------- */

    footer {

        padding:
            28px 16px;

    }


    footer p {

        font-size:
            11px;

        line-height:
            1.5;

    }

}


/* ============================================================
   CELULARES MUITO PEQUENOS
============================================================ */

@media (max-width: 380px) {

    .logo {

        font-size:
            15px;

    }


    nav .btn-login {

        display:
            none;

    }


    .hero h1 {

        font-size:
            36px;

    }


    .models {

        grid-template-columns:
            1fr;

    }


    .model {

        min-height:
            auto;

    }

}


/* ============================================================
   ACESSIBILIDADE
============================================================ */

button:focus-visible,
a:focus-visible,
textarea:focus-visible {

    outline:
        3px solid rgba(99, 91, 255, 0.35);

    outline-offset:
        3px;

}


/* ============================================================
   REDUZIR ANIMAÇÕES
============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}
body {
    background: rgb(229, 231, 228) !important;
}