/*!
 * BHUT - BHUT v2.1.0 (https://bhut.com.br/)
 * Todos os Direitos Reservados-2026 BHUT
 */
:root {
    --radius: .75rem;
    --background: oklch(.985 .02 95);
    --foreground: oklch(.28 .06 260);
    --card: oklch(1 0 0);
    --secondary: oklch(.93 .06 220);
    --muted-foreground: oklch(.53 .04 255);
    --primary: oklch(.68 .19 32);
    --primary-foreground: oklch(.99 .01 90);
    --border: oklch(.9 .03 250);
    --sky: oklch(.72 .15 232);
    --grass: oklch(.72 .16 145);
    --berry: oklch(.66 .2 350);
    --sun: oklch(.85 .16 88);
    --gradient-sky-middle: linear-gradient(180deg, oklch(.985 .02 95) 0%, oklch(.93 .07 225) 20%, oklch(.93 .07 225) 80%, oklch(.985 .02 95) 100%);
    --gradient-sky: linear-gradient(180deg, oklch(.93 .07 225) 0%, oklch(.985 .02 95) 100%);
    --gradient-sky-reversed: linear-gradient(180deg, oklch(.985 .02 95) 0%, oklch(.93 .07 225) 100%);
    --gradient-fun: linear-gradient(100deg, var(--berry), var(--primary) 45%, var(--sun));
    --shadow-toy: 0 1px 0 -4px color-mix(in oklab, var(--foreground) 12%, transparent), 0 24px 45px -20px color-mix(in oklab, var(--foreground) 45%, transparent);
    --shadow-soft: 0 18px 40px -24px color-mix(in oklab, var(--foreground) 55%, transparent);
}

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

html {
    scroll-behavior: smooth
}

body {
    background: var(--background);
    color: var(--foreground);
    font-family: "Nunito", system-ui, sans-serif;
    overflow-x: hidden
}

h1, h2, h3 {
    font-family: "Baloo 2", system-ui, sans-serif;
    letter-spacing: -.01em
}

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

a {
    color: inherit
}

.wrap {
    max-width: 72rem;
    margin: 0 auto;
    padding: 2rem 1.25rem
}

header.hero {
    background-image: var(--gradient-sky)
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 0
}

.brand {
    display: flex;
    align-items: center;
    gap: .75rem
}

.brand img {
    width: 44px;
    height: 44px;
    border-radius: .75rem;
    box-shadow: var(--shadow-soft)
}

.brand span {
    font-family: "Baloo 2", sans-serif;
    font-size: 1.25rem;
    font-weight: 800
}

.nav-cta {
    display: none;
    background: var(--foreground);
    color: var(--background);
    padding: .625rem 1.25rem;
    border-radius: 999px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    text-decoration: none
}

@media(min-width: 640px) {
    .nav-cta {
        display: inline-block
    }
}

.hero-grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
    padding: 1.5rem 0 5rem
}

@media(min-width: 768px) {
    .hero-grid {
        grid-template-columns:1fr 1fr;
        padding-bottom: 7rem
    }
}

.badge {
    display: inline-block;
    background: color-mix(in oklab, var(--card) 80%, transparent);
    padding: .375rem 1rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
    color: var(--muted-foreground);
    margin-bottom: 1rem
}

h1 {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1
}

@media(min-width: 640px) {
    h1 {
        font-size: 3rem
    }
}

@media(min-width: 768px) {
    h1 {
        font-size: 3.75rem
    }
}

.fun {
    background-image: var(--gradient-fun);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.lead {
    margin-top: 1.25rem;
    max-width: 32rem;
    font-size: 1.125rem;
    color: var(--muted-foreground)
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
    justify-content: center;
}

@media(min-width: 768px) {
    .buttons {
        justify-content: normal;
    }
}

.btn {
    transition: transform .2s
}

.btn:hover {
    transform: translateY(-4px)
}

.btn img {
    height: 50px;
}

.hero-img {
    width: 100%;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-toy);
    animation: float-soft 6s ease-in-out infinite
}

@keyframes float-soft {
    0%, 100% {
        transform: translateY(0) rotate(-2deg)
    }
    50% {
        transform: translateY(-14px) rotate(2deg)
    }
}

section {
    padding: 5rem 0
}

h2 {
    font-size: 1.875rem;
    font-weight: 800
}

@media(min-width: 640px) {
    h2 {
        font-size: 2.25rem
    }
}

.center {
    text-align: center
}

.sub {
    margin: .75rem auto 0;
    max-width: 42rem;
    color: var(--muted-foreground)
}

.features {
    display: grid;
    gap: 1.5rem;
    margin-top: 3rem
}

@media(min-width: 640px) {
    .features {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media(min-width: 1024px) {
    .features {
        grid-template-columns:repeat(3, 1fr)
    }
}

.card {
    background: var(--card);
    padding: 1.75rem;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-soft);
    transition: transform .2s
}

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

.card .emoji {
    font-size: 2.25rem
}

.card h3 {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 700
}

.card p {
    margin-top: .5rem;
    color: var(--muted-foreground)
}

.shots-section {
    background-image: var(--gradient-sky-middle);
}

.shots {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem
}

@media(min-width: 640px) {
    .shots {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media(min-width: 1024px) {
    .shots {
        grid-template-columns:repeat(3, 1fr)
    }
}


.shots img {
    margin: 0 auto;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 1rem;
    border: 4px solid var(--card);
    box-shadow: var(--shadow-soft)
}

.cta-box {
    max-width: 56rem;
    margin: 0 auto;
    background: var(--card);
    padding: 2.5rem;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-toy);
    text-align: center
}

@media(min-width: 640px) {
    .cta-box {
        padding: 3.5rem
    }
}

.cta-box .cta-box-img {
    width: 88px;
    height: 88px;
    border-radius: 1.5rem;
    margin: 0 auto;
    box-shadow: var(--shadow-soft)
}

.cta-box h2 {
    margin-top: 1.5rem
}

.cta-box p {
    margin-top: .75rem;
    color: var(--muted-foreground)
}

.cta-box .buttons {
    justify-content: center
}

footer {
    padding: 2.5rem 0;
    margin-top: 2.5rem;
    text-align: center;
    font-size: .875rem;
    background-image: var(--gradient-sky-reversed);
    color: var(--muted-foreground)
}

footer a {
    font-weight: 700;
    color: var(--foreground)
}

footer a:hover {
    text-decoration: underline
}

.other-apps {
    display: grid;
    gap: 1.5rem;
    margin-top: 3rem
}

@media(min-width: 640px) {
    .other-apps {
        grid-template-columns:repeat(2, 1fr)
    }
}

.app-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--card);
    padding: 1.5rem;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    color: inherit;
    transition: transform .2s
}

.app-card:hover {
    transform: translateY(-4px)
}

.app-card img {
    flex: 0 0 auto;
    border-radius: 1rem
}

.app-card h3 {
    font-size: 1.1rem;
    font-weight: 700
}

.app-card p {
    margin-top: .4rem;
    color: var(--muted-foreground);
    font-size: .92rem
}