/* =====================================================
   PETVERSE AI - PREMIUM GLOBAL STYLE
   ===================================================== */

:root {
    --bg: #080812;
    --bg-soft: #11111f;
    --card: rgba(255,255,255,0.07);
    --card-border: rgba(255,255,255,0.12);
    --text: #f7f7fb;
    --muted: #b6b6c8;
    --gold: #f7c76b;
    --pink: #ff5fa2;
    --purple: #875cff;
    --white: #ffffff;
    --radius: 24px;
    --shadow: 0 25px 80px rgba(0,0,0,0.35);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(135,92,255,0.35), transparent 35%),
        radial-gradient(circle at top right, rgba(255,95,162,0.22), transparent 32%),
        var(--bg);
    color: var(--text);
}

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

.container {
    width: min(1160px, 92%);
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(18px);
    background: rgba(8,8,18,0.78);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-wrap {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gold), var(--pink));
    color: #111;
    font-weight: 900;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 24px;
    color: var(--muted);
    font-size: 14px;
}

.nav-menu a:hover {
    color: var(--white);
}

.nav-cta {
    padding: 12px 18px;
    border-radius: 999px;
    color: #111 !important;
    font-weight: 800;
    background: linear-gradient(135deg, var(--gold), var(--pink));
}

.hero {
    padding: 96px 0 80px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 14px;
}

h1, h2, h3 {
    margin: 0;
    letter-spacing: -0.05em;
}

.hero h1 {
    font-size: clamp(46px, 7vw, 82px);
    line-height: 0.92;
    max-width: 720px;
}

.hero p {
    color: var(--muted);
    font-size: 19px;
    line-height: 1.7;
    max-width: 610px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin: 34px 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-weight: 800;
}

.btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--pink));
    color: #101018;
    box-shadow: 0 12px 35px rgba(255,95,162,0.25);
}

.btn-secondary {
    background: rgba(255,255,255,0.08);
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.12);
}

.full {
    width: 100%;
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trust-row span {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: var(--muted);
    font-size: 14px;
}

.hero-card {
    padding: 18px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04));
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
}

.movie-preview {
    min-height: 530px;
    border-radius: 26px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.72)),
        radial-gradient(circle at 50% 10%, rgba(247,199,107,0.55), transparent 35%),
        linear-gradient(135deg, #211837, #100b1e);
}

.movie-poster {
    margin-top: auto;
    text-align: center;
    padding: 32px 16px;
}

.movie-poster span {
    color: var(--gold);
    font-weight: 900;
    letter-spacing: 0.16em;
    font-size: 12px;
}

.movie-poster h3 {
    font-size: 64px;
    margin-top: 10px;
}

.movie-poster p {
    color: var(--muted);
}

.play-pill {
    align-self: center;
    padding: 13px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.14);
}

.section {
    padding: 86px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 42px;
}

.section-title h2 {
    font-size: clamp(34px, 5vw, 56px);
}

.steps-grid,
.pricing-grid,
.style-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.step-card,
.price-card,
.style-card,
.auth-card,
.form-card,
.empty-state {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: var(--shadow);
}

.step-card span {
    color: var(--gold);
    font-weight: 900;
}

.step-card p,
.price-card p,
.empty-state p,
.faq p {
    color: var(--muted);
    line-height: 1.7;
}

.dark-section {
    background: rgba(0,0,0,0.18);
}

.style-card {
    min-height: 110px;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 800;
}

.price-card {
    position: relative;
    text-align: center;
}

.price-card strong {
    display: block;
    font-size: 42px;
    margin: 18px 0 8px;
}

.featured {
    transform: scale(1.04);
    border-color: rgba(247,199,107,0.45);
}

.badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: #111;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.faq-list {
    max-width: 780px;
    margin: 0 auto;
}

details {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 14px;
}

summary {
    cursor: pointer;
    font-weight: 800;
}

.auth-section,
.form-section,
.dashboard-section {
    min-height: 72vh;
    padding: 80px 0;
}

.auth-card,
.form-card {
    max-width: 480px;
    margin: 0 auto;
}

.dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}

.empty-state {
    text-align: center;
    padding: 70px 24px;
}

form {
    display: grid;
    gap: 14px;
}

label {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: var(--text);
    border-radius: 14px;
    padding: 15px;
    outline: none;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

.auth-link {
    text-align: center;
    color: var(--muted);
}

.auth-link a {
    color: var(--gold);
    font-weight: 800;
}

.site-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 56px 0 24px;
    background: rgba(0,0,0,0.22);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 34px;
}

.footer-brand {
    font-size: 24px;
    font-weight: 900;
}

.site-footer p,
.site-footer a {
    display: block;
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 8px;
}

.footer-bottom {
    text-align: center;
    color: var(--muted);
    margin-top: 36px;
    font-size: 14px;
}

@media (max-width: 900px) {
    .hero-grid,
    .steps-grid,
    .pricing-grid,
    .style-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .nav-menu {
        display: none;
    }

    .hero {
        padding-top: 64px;
    }

    .hero-actions {
        flex-direction: column;
    }

    .featured {
        transform: none;
    }

    .dashboard-head {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =====================================================
   STEP 2 - AUTH, PROJECTS AND STATUS
   ===================================================== */

.alert {
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 18px;
    font-weight: 700;
}

.alert-error {
    background: rgba(255,95,95,0.12);
    border: 1px solid rgba(255,95,95,0.28);
    color: #ffd2d2;
}

.movies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.movie-card {
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.movie-thumb {
    height: 260px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}

.movie-thumb img,
.project-photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.movie-card-body {
    padding: 22px;
}

.movie-card-body h2 {
    font-size: 24px;
    margin: 12px 0 6px;
}

.movie-card-body p {
    color: var(--muted);
}

.status-pill {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255,255,255,0.09);
    color: var(--muted);
}

.status-pending,
.status-processing {
    color: var(--gold);
    background: rgba(247,199,107,0.12);
}

.status-completed {
    color: #9fffc1;
    background: rgba(80,255,150,0.12);
}

.status-failed {
    color: #ffb3b3;
    background: rgba(255,90,90,0.12);
}

.project-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 26px;
    align-items: stretch;
}

.project-photo-card,
.project-info-card,
.jobs-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.project-info-card,
.jobs-card {
    padding: 30px;
}

.project-info-card p,
.muted {
    color: var(--muted);
    line-height: 1.7;
}

.jobs-card {
    margin-top: 28px;
}

.jobs-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.job-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}

.job-row span {
    color: var(--muted);
}

@media (max-width: 900px) {
    .movies-grid,
    .project-grid {
        grid-template-columns: 1fr;
    }

    .project-photo-card {
        min-height: 320px;
    }
}

.premium-hero {
    position: relative;
    overflow: hidden;
}

.hero-showcase {
    position: relative;
}

.before-after-label {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 3;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cinema-frame {
    min-height: 560px;
    border-radius: 28px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.78)),
        radial-gradient(circle at 50% 25%, rgba(247,199,107,0.6), transparent 35%),
        radial-gradient(circle at 80% 10%, rgba(255,95,162,0.32), transparent 30%),
        linear-gradient(135deg, #1c1632, #090814);
}

.cinema-top {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.poster-glow {
    text-align: center;
    margin-top: auto;
    padding: 70px 10px 40px;
}

.poster-kicker {
    color: var(--gold);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: 0.2em;
}

.poster-glow h3 {
    font-size: clamp(58px, 8vw, 92px);
    margin: 10px 0;
    text-shadow: 0 15px 55px rgba(247,199,107,0.35);
}

.poster-glow p {
    color: var(--muted);
    font-size: 17px;
}

.pain-section {
    padding-top: 40px;
}

.pain-grid,
.social-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 34px;
    align-items: center;
}

.pain-grid h2,
.social-grid h2 {
    font-size: clamp(34px, 5vw, 58px);
}

.pain-card,
.social-script,
.emotion-box,
.value-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.pain-card {
    padding: 34px;
}

.pain-card p,
.social-grid p,
.social-script p,
.emotion-box p,
.value-card p {
    color: var(--muted);
    line-height: 1.8;
    font-size: 17px;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.value-card {
    padding: 28px;
}

.value-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255,255,255,0.08);
    font-size: 28px;
    margin-bottom: 18px;
}

.emotion-section {
    padding: 96px 0;
}

.emotion-box {
    padding: 58px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    background:
        linear-gradient(135deg, rgba(247,199,107,0.13), rgba(255,95,162,0.11)),
        rgba(255,255,255,0.06);
}

.emotion-box h2 {
    font-size: clamp(36px, 6vw, 64px);
    max-width: 780px;
    margin: 0 auto 18px;
}

.emotion-box p {
    max-width: 760px;
    margin: 0 auto 30px;
}

.social-section {
    background:
        radial-gradient(circle at left, rgba(255,95,162,0.15), transparent 35%),
        rgba(0,0,0,0.12);
}

.social-script {
    padding: 34px;
    border-left: 4px solid var(--gold);
}

.social-script h3 {
    margin-bottom: 18px;
}

.final-cta {
    padding: 90px 0;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(247,199,107,0.22), transparent 42%),
        rgba(0,0,0,0.28);
}

.final-cta h2 {
    font-size: clamp(36px, 6vw, 64px);
    max-width: 900px;
    margin: 0 auto 28px;
}

@media (max-width: 900px) {
    .pain-grid,
    .social-grid,
    .value-grid {
        grid-template-columns: 1fr;
    }

    .cinema-frame {
        min-height: 460px;
    }

    .emotion-box {
        padding: 34px 22px;
    }
}
/* =====================================================
   PETVERSE AI - PREMIUM INDEX V2
   ===================================================== */

.pv-hero {
    min-height: calc(100vh - 78px);
    display: flex;
    align-items: center;
    padding: 80px 0 90px;
    background:
        radial-gradient(circle at 12% 20%, rgba(247,199,107,0.16), transparent 32%),
        radial-gradient(circle at 90% 10%, rgba(255,95,162,0.12), transparent 28%);
}

.pv-hero-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 70px;
    align-items: center;
}

.pv-eyebrow {
    display: inline-flex;
    margin-bottom: 18px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pv-hero-copy h1 {
    max-width: 760px;
    font-size: clamp(54px, 7.5vw, 92px);
    line-height: 0.9;
    letter-spacing: -0.075em;
}

.pv-hero-copy p {
    max-width: 640px;
    margin: 28px 0 0;
    color: var(--muted);
    font-size: 20px;
    line-height: 1.75;
}

.pv-hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
}

.pv-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.pv-trust span {
    padding: 11px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,0.075);
    border: 1px solid rgba(255,255,255,0.09);
    color: var(--muted);
    font-size: 14px;
}

.pv-hero-poster {
    position: relative;
}

.pv-poster-card {
    position: relative;
    min-height: 650px;
    overflow: hidden;
    border-radius: 36px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 40px 120px rgba(0,0,0,0.48);
}

.pv-poster-card img {
    width: 100%;
    height: 650px;
    object-fit: cover;
    display: block;
    filter: saturate(1.08) contrast(1.08);
}

.pv-poster-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.92)),
        radial-gradient(circle at center 35%, rgba(247,199,107,0.12), transparent 38%);
}

.pv-poster-content {
    position: absolute;
    inset: 0;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
}

.pv-poster-content span {
    color: var(--gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pv-poster-content h2 {
    margin: 14px 0 8px;
    font-size: clamp(64px, 8vw, 110px);
    line-height: 0.86;
    text-shadow: 0 12px 50px rgba(0,0,0,0.88);
}

.pv-poster-content p {
    color: #f4f0ff;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 8px 30px rgba(0,0,0,0.85);
}

.pv-play {
    align-self: center;
    margin-top: 24px;
    padding: 14px 20px;
    border-radius: 999px;
    background: rgba(0,0,0,0.58);
    border: 1px solid rgba(255,255,255,0.24);
    color: #fff;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

.pv-section {
    padding: 100px 0;
}

.pv-section-title {
    max-width: 830px;
    margin: 0 auto 50px;
    text-align: center;
}

.pv-section-title h2 {
    font-size: clamp(38px, 5.5vw, 68px);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.pv-section-title p {
    max-width: 700px;
    margin: 20px auto 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.pv-magic {
    background: rgba(0,0,0,0.16);
}

.pv-before-after-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pv-transform-card {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 12px;
    padding: 12px;
    border-radius: 28px;
    background: rgba(255,255,255,0.065);
    border: 1px solid rgba(255,255,255,0.11);
    box-shadow: var(--shadow);
}

.pv-before,
.pv-after {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
}

.pv-before img,
.pv-after img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pv-before span,
.pv-after span {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(0,0,0,0.58);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.pv-after::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,0.82));
}

.pv-after strong {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 20px;
    z-index: 3;
    color: #fff;
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pv-trailer-section {
    background:
        radial-gradient(circle at left, rgba(247,199,107,0.14), transparent 36%),
        rgba(0,0,0,0.24);
}

.pv-trailer-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 54px;
    align-items: center;
}

.pv-trailer-grid h2 {
    font-size: clamp(40px, 5.5vw, 72px);
    line-height: 0.96;
}

.pv-trailer-grid p {
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75;
    margin-bottom: 28px;
}

.pv-video-mockup {
    position: relative;
    overflow: hidden;
    min-height: 430px;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: var(--shadow);
}

.pv-video-mockup img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;
}

.pv-video-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.72));
    text-align: center;
}

.pv-big-play {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    backdrop-filter: blur(10px);
    font-size: 32px;
}

.pv-video-overlay span {
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pv-kit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.pv-kit-card,
.pv-gift-card {
    min-height: 260px;
    padding: 30px;
    border-radius: 26px;
    background: rgba(255,255,255,0.065);
    border: 1px solid rgba(255,255,255,0.11);
    box-shadow: var(--shadow);
}

.pv-kit-card span {
    color: var(--gold);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.pv-kit-card h3,
.pv-gift-card h3 {
    margin-top: 24px;
    font-size: 28px;
}

.pv-kit-card p,
.pv-gift-card p {
    color: var(--muted);
    line-height: 1.75;
}

.pv-universe-section {
    background: rgba(0,0,0,0.18);
}

.pv-universe-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.pv-universe-card {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: var(--shadow);
}

.pv-universe-card img {
    width: 100%;
    height: 310px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.pv-universe-card:hover img {
    transform: scale(1.06);
}

.pv-universe-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.88));
}

.pv-universe-card span {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.pv-emotion-section {
    padding: 120px 0;
}

.pv-emotion-box {
    max-width: 980px;
    padding: 70px 54px;
    border-radius: 36px;
    text-align: center;
    background:
        linear-gradient(135deg, rgba(247,199,107,0.14), rgba(255,95,162,0.08)),
        rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: var(--shadow);
}

.pv-emotion-box h2 {
    font-size: clamp(40px, 6vw, 76px);
    line-height: 0.96;
}

.pv-emotion-box p {
    max-width: 760px;
    margin: 24px auto 32px;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.75;
}

.pv-gift-section {
    background: rgba(0,0,0,0.16);
}

.pv-gift-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.pv-final-cta {
    padding: 120px 0;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(247,199,107,0.2), transparent 42%),
        rgba(0,0,0,0.26);
}

.pv-final-cta h2 {
    max-width: 940px;
    margin: 0 auto 34px;
    font-size: clamp(42px, 7vw, 84px);
    line-height: 0.94;
}

@media (max-width: 1100px) {
    .pv-before-after-grid,
    .pv-kit-grid,
    .pv-gift-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pv-hero-grid,
    .pv-trailer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .pv-hero {
        padding: 56px 0 70px;
    }

    .pv-hero-actions {
        flex-direction: column;
    }

    .pv-poster-card,
    .pv-poster-card img {
        min-height: 520px;
        height: 520px;
    }

    .pv-before-after-grid,
    .pv-kit-grid,
    .pv-universe-grid,
    .pv-gift-grid {
        grid-template-columns: 1fr;
    }

    .pv-transform-card {
        grid-template-columns: 1fr;
    }

    .pv-before,
    .pv-after {
        min-height: 280px;
    }

    .pv-section {
        padding: 74px 0;
    }

    .pv-emotion-box {
        padding: 42px 24px;
    }
}
/* PETVERSE CINEMATIC EXPERIENCE */

.pv-cinema-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 20%, rgba(247,199,107,0.2), transparent 34%),
        radial-gradient(circle at 80% 10%, rgba(255,95,162,0.1), transparent 30%),
        linear-gradient(180deg, #080812 0%, #05050c 100%);
}

.pv-main-movie-poster {
    position: relative;
    min-height: 670px;
    overflow: hidden;
    border-radius: 42px;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 45px 150px rgba(0,0,0,0.65);
}

.pv-main-movie-poster img {
    width: 100%;
    height: 670px;
    object-fit: cover;
    display: block;
    filter: contrast(1.1) saturate(1.15);
}

.pv-main-poster-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center 28%, rgba(247,199,107,0.16), transparent 34%),
        linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.95));
}

.pv-main-poster-content {
    position: absolute;
    inset: 0;
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
}

.pv-main-poster-content span {
    color: var(--gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.22em;
}

.pv-main-poster-content h2 {
    font-size: clamp(76px, 9vw, 125px);
    line-height: 0.85;
    margin: 14px 0 8px;
    text-shadow: 0 14px 55px rgba(0,0,0,0.9);
}

.pv-main-poster-content p {
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.pv-movie-meta {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.pv-movie-meta small {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-weight: 800;
}

.pv-heroes-section {
    background:
        radial-gradient(circle at top, rgba(247,199,107,0.1), transparent 36%),
        rgba(0,0,0,0.22);
}

.pv-heroes-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 24px;
}

.pv-hero-character {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,0.13);
    box-shadow: var(--shadow);
    background: rgba(255,255,255,0.06);
}

.pv-hero-character.big {
    min-height: 520px;
}

.pv-hero-character img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.pv-hero-character:hover img {
    transform: scale(1.06);
}

.pv-hero-character::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,0.92));
}

.pv-hero-character div {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
}

.pv-hero-character span {
    color: var(--gold);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.pv-hero-character h3 {
    margin: 10px 0 6px;
    font-size: clamp(38px, 4vw, 62px);
}

.pv-hero-character p {
    color: #f0edff;
    font-weight: 700;
}

.pv-trailer-cinema {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.36)),
        radial-gradient(circle at 50% 20%, rgba(247,199,107,0.13), transparent 40%);
}

.pv-netflix-player {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: 42px;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 45px 150px rgba(0,0,0,0.58);
}

.pv-netflix-player img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    display: block;
}

.pv-netflix-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 30px;
    background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.78));
}

.pv-play-button {
    width: 104px;
    height: 104px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    font-size: 38px;
    backdrop-filter: blur(12px);
}

.pv-netflix-overlay h3 {
    font-size: clamp(38px, 5vw, 72px);
}

.pv-netflix-overlay p {
    color: #eee;
    font-size: 18px;
    max-width: 600px;
    margin: 16px auto 0;
}

@media (max-width: 1000px) {
    .pv-heroes-grid {
        grid-template-columns: 1fr;
    }

    .pv-main-movie-poster,
    .pv-main-movie-poster img {
        min-height: 560px;
        height: 560px;
    }

    .pv-netflix-player,
    .pv-netflix-player img {
        min-height: 420px;
        height: 420px;
    }
}

/* =====================================================
   PETVERSE AI - APPROVED MOCKUP HOME
   Cole no final do assets/css/style.css
   ===================================================== */

.pv-approved-home {
    background: #05070d;
    color: #fff;
}

.approved-hero {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 18%, rgba(247,199,107,.16), transparent 30%),
        linear-gradient(180deg, #060811 0%, #05070d 100%);
    border-bottom: 1px solid rgba(255,255,255,.11);
}

.approved-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5,7,13,.98) 0%, rgba(5,7,13,.86) 37%, rgba(5,7,13,.18) 68%, rgba(5,7,13,.05) 100%),
        url('../img/petverse/hero-bg-wide.jpg') center right/cover no-repeat;
    opacity: 1;
}

.approved-hero-grid {
    position: relative;
    z-index: 2;
    min-height: 620px;
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 42px;
    align-items: center;
}

.approved-kicker {
    display: inline-flex;
    color: var(--gold);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.approved-copy h1 {
    margin: 18px 0 0;
    max-width: 720px;
    font-size: clamp(48px, 6vw, 82px);
    line-height: .9;
    letter-spacing: -.07em;
    text-transform: uppercase;
}

.approved-copy h1 strong {
    display: inline-block;
    background: linear-gradient(180deg, #fff0bd, #df9e31);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.approved-copy p {
    max-width: 600px;
    margin: 24px 0 0;
    color: #f0edf7;
    font-size: 19px;
    line-height: 1.55;
}

.approved-actions {
    display: flex;
    gap: 14px;
    margin-top: 28px;
}

.approved-primary {
    min-height: 58px;
    padding: 0 28px;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.approved-secondary,
.approved-watch {
    min-height: 58px;
    padding: 0 26px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.23);
    background: rgba(0,0,0,.25);
    text-transform: uppercase;
    letter-spacing: .025em;
}

.approved-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
}

.approved-proof span {
    color: #eee;
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase;
}

.approved-poster {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 18px;
}

.approved-poster img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.approved-poster-shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 55% 28%, rgba(247,199,107,.18), transparent 28%),
        linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.32) 42%, rgba(0,0,0,.95) 100%);
}

.approved-poster-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    text-align: center;
    padding: 0 28px;
}

.approved-poster-title small,
.approved-poster-title span {
    display: block;
    color: var(--gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .35em;
    text-transform: uppercase;
}

.approved-poster-title h2 {
    margin: 10px 0 4px;
    color: #f4c067;
    font-family: Georgia, serif;
    font-size: clamp(72px, 9vw, 126px);
    line-height: .82;
    letter-spacing: .18em;
    text-shadow: 0 15px 50px rgba(0,0,0,.92);
}

.approved-poster-title p {
    margin: 0 0 17px;
    color: #fff;
    font-size: 22px;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.approved-heroes {
    padding: 26px 0 34px;
    background: #070b14;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.approved-row-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.approved-row-title h2 {
    color: var(--gold);
    font-size: 18px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.approved-heroes-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.approved-heroes-grid article {
    position: relative;
    min-height: 200px;
    overflow: hidden;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 50px rgba(0,0,0,.38);
}

.approved-heroes-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.approved-heroes-grid article:hover img {
    transform: scale(1.06);
}

.approved-heroes-grid article::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.92));
}

.approved-heroes-grid article div {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    text-align: center;
}

.approved-heroes-grid h3 {
    font-family: Georgia, serif;
    font-size: 25px;
    letter-spacing: .08em;
}

.approved-heroes-grid p {
    margin: 4px 0 8px;
    color: #eee;
    font-size: 13px;
}

.approved-heroes-grid b {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(247,199,107,.2);
    border: 1px solid rgba(247,199,107,.3);
    font-size: 10px;
    text-transform: uppercase;
}

.approved-content {
    padding: 38px 0 58px;
    background: #05070d;
}

.approved-content-grid {
    display: grid;
    grid-template-columns: .85fr 1.05fr 1.15fr;
    gap: 28px;
    align-items: stretch;
}

.approved-trailer-copy,
.approved-receive {
    padding: 28px 0;
}

.approved-trailer-copy h2 {
    margin-top: 16px;
    font-size: 35px;
    line-height: 1;
}

.approved-trailer-copy p {
    color: #ddd;
    line-height: 1.55;
    margin: 16px 0 26px;
}

.approved-video {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.15);
    background: #111;
}

.approved-video img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.approved-video button {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 82px;
    height: 82px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 3px solid #fff;
    background: rgba(0,0,0,.36);
    color: #fff;
    font-size: 32px;
}

.approved-video-controls {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.approved-video-controls i {
    height: 5px;
    flex: 1;
    border-radius: 999px;
    background: rgba(255,255,255,.35);
}

.approved-receive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 18px;
}

.approved-receive-grid div {
    min-height: 170px;
    padding: 20px 16px;
    border-radius: 14px;
    text-align: center;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.12);
}

.approved-receive-grid strong {
    font-size: 34px;
}

.approved-receive-grid h3 {
    margin: 14px 0 10px;
    color: var(--gold);
    font-size: 15px;
    text-transform: uppercase;
}

.approved-receive-grid p {
    color: #ddd;
    font-size: 13px;
    line-height: 1.45;
}

.approved-packages {
    padding: 82px 0;
    background: #070b14;
}

.approved-section-title {
    max-width: 850px;
    margin: 0 auto 44px;
    text-align: center;
}

.approved-section-title h2 {
    margin-top: 14px;
    font-size: clamp(40px, 5vw, 68px);
    line-height: .95;
}

.approved-final {
    padding: 110px 0;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(247,199,107,.2), transparent 42%),
        #05070d;
}

.approved-final h2 {
    max-width: 860px;
    margin: 18px auto 30px;
    font-size: clamp(44px, 6vw, 82px);
    line-height: .9;
}

@media (max-width: 1100px) {
    .approved-hero-grid,
    .approved-content-grid {
        grid-template-columns: 1fr;
    }

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

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

    .approved-poster {
        min-height: 440px;
    }

    .approved-poster img {
        height: 440px;
    }
}

@media (max-width: 720px) {
    .approved-actions {
        flex-direction: column;
    }

    .approved-heroes-grid,
    .approved-receive-grid {
        grid-template-columns: 1fr;
    }

    .approved-poster-title h2 {
        font-size: 62px;
    }

    .approved-poster-title p {
        font-size: 16px;
    }
}

/* =====================================================
   PETVERSE AI - CLEAN PREMIUM HOME
   Cole no final do assets/css/style.css
   ===================================================== */

.pv-clean-home {
    background: #05070d;
    color: #fff;
}

.clean-hero {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    background: #05070d;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.clean-hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5,7,13,.98) 0%, rgba(5,7,13,.88) 42%, rgba(5,7,13,.18) 76%),
        url('../img/petverse/hero-bg-wide.jpg') center right/cover no-repeat;
    opacity: .96;
}

.clean-hero-grid {
    position: relative;
    z-index: 2;
    min-height: 720px;
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 64px;
    align-items: center;
}

.clean-kicker {
    display: inline-flex;
    color: var(--gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.clean-copy h1 {
    margin-top: 20px;
    max-width: 760px;
    font-size: clamp(58px, 7vw, 102px);
    line-height: .86;
    letter-spacing: -.08em;
    text-transform: uppercase;
}

.clean-copy p {
    max-width: 610px;
    margin: 28px 0 0;
    color: #efeaf8;
    font-size: 20px;
    line-height: 1.58;
}

.clean-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
}

.clean-primary,
.clean-secondary {
    min-height: 58px;
    padding: 0 28px;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.clean-secondary {
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.22);
}

.clean-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.clean-proof span {
    padding: 10px 14px;
    border-radius: 999px;
    color: #efeaf8;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
}

.clean-poster {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 40px 120px rgba(0,0,0,.55);
}

.clean-poster img {
    width: 100%;
    height: 560px;
    display: block;
    object-fit: cover;
}

.clean-heroes,
.clean-experience,
.clean-pricing {
    padding: 86px 0;
    background: #070b14;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.clean-section-head {
    max-width: 820px;
    margin: 0 auto 44px;
    text-align: center;
}

.clean-section-head.left {
    margin-left: 0;
    text-align: left;
}

.clean-section-head h2 {
    margin-top: 14px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: .95;
    letter-spacing: -.065em;
}

.clean-heroes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.clean-heroes-grid article {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    border-radius: 22px;
    background: #111;
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 24px 70px rgba(0,0,0,.36);
}

.clean-heroes-grid img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.clean-heroes-grid article:hover img {
    transform: scale(1.05);
}

.clean-heroes-grid article::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.92));
}

.clean-heroes-grid div {
    position: absolute;
    z-index: 2;
    left: 20px;
    right: 20px;
    bottom: 18px;
}

.clean-heroes-grid h3 {
    font-family: Georgia, serif;
    font-size: 34px;
    letter-spacing: .08em;
}

.clean-heroes-grid p {
    color: #efeaf8;
    margin-top: 4px;
}

.clean-experience {
    background: #05070d;
}

.clean-experience-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 58px;
    align-items: center;
}

.clean-video {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 34px 100px rgba(0,0,0,.45);
}

.clean-video img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
}

.clean-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.5));
}

.clean-play {
    position: absolute;
    z-index: 2;
    inset: 0;
    margin: auto;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.75);
    background: rgba(0,0,0,.3);
    color: #fff;
    font-size: 34px;
}

.clean-experience-copy h2 {
    margin-top: 14px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: .95;
    letter-spacing: -.065em;
}

.clean-experience-copy p {
    margin: 22px 0 28px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.clean-kit-list {
    display: grid;
    gap: 12px;
}

.clean-kit-list div {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.1);
}

.clean-kit-list strong {
    color: var(--gold);
    font-size: 13px;
    letter-spacing: .12em;
}

.clean-kit-list span {
    font-weight: 850;
}

.clean-emotion {
    padding: 96px 0;
    background:
        radial-gradient(circle at center, rgba(247,199,107,.16), transparent 42%),
        #070b14;
}

.clean-emotion-box {
    max-width: 980px;
    margin: 0 auto;
    padding: 68px 48px;
    text-align: center;
    border-radius: 34px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
}

.clean-emotion-box h2 {
    margin-top: 16px;
    font-size: clamp(40px, 6vw, 76px);
    line-height: .92;
    letter-spacing: -.07em;
}

.clean-emotion-box p {
    max-width: 720px;
    margin: 22px auto 30px;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.7;
}

@media (max-width: 1000px) {
    .clean-hero-grid,
    .clean-experience-grid {
        grid-template-columns: 1fr;
    }

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

    .clean-poster,
    .clean-poster img {
        min-height: 460px;
        height: 460px;
    }
}

@media (max-width: 680px) {
    .clean-actions {
        flex-direction: column;
    }

    .clean-heroes-grid {
        grid-template-columns: 1fr;
    }

    .clean-emotion-box {
        padding: 44px 24px;
    }

    .clean-video,
    .clean-video img {
        min-height: 320px;
        height: 320px;
    }
}

/* =====================================================
   PETVERSE AI - MAGICAL CINEMATIC HOME
   Cole no final do assets/css/style.css
   ===================================================== */

.pv-magic-home {
    background: #05070d;
    color: #fff;
    overflow: hidden;
}

.magic-hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(247,199,107,.24), transparent 28%),
        radial-gradient(circle at 24% 18%, rgba(116,89,255,.22), transparent 34%),
        linear-gradient(180deg, #080815 0%, #05070d 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.magic-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 1px),
        radial-gradient(circle, rgba(247,199,107,.55) 1px, transparent 1px);
    background-size: 90px 90px, 140px 140px;
    background-position: 20px 30px, 70px 80px;
    opacity: .18;
}

.magic-hero-glow {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5,7,13,.98) 0%, rgba(5,7,13,.82) 45%, rgba(5,7,13,.20) 76%),
        url('../img/petverse/hero-bg-wide.jpg') center right/cover no-repeat;
    opacity: .68;
}

.magic-hero-grid {
    position: relative;
    z-index: 3;
    min-height: 760px;
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 72px;
    align-items: center;
}

.magic-kicker {
    display: inline-flex;
    color: var(--gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.magic-copy h1 {
    max-width: 760px;
    margin-top: 20px;
    font-size: clamp(58px, 7vw, 104px);
    line-height: .86;
    letter-spacing: -.08em;
}

.magic-copy p {
    max-width: 620px;
    margin: 28px 0 0;
    color: #ebe6f7;
    font-size: 20px;
    line-height: 1.65;
}

.magic-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
}

.magic-primary,
.magic-secondary {
    min-height: 58px;
    padding: 0 28px;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.magic-secondary {
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
}

.magic-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.magic-proof span {
    padding: 10px 14px;
    border-radius: 999px;
    color: #f2efff;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
}

.magic-poster-wrap {
    position: relative;
}

.magic-poster-wrap::before {
    content: "";
    position: absolute;
    inset: -25px;
    border-radius: 44px;
    background: radial-gradient(circle, rgba(247,199,107,.32), transparent 62%);
    filter: blur(20px);
}

.magic-poster {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 44px 140px rgba(0,0,0,.60);
}

.magic-poster img {
    width: 100%;
    height: 590px;
    display: block;
    object-fit: cover;
}

.magic-poster-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 55% 30%, rgba(247,199,107,.18), transparent 30%),
        linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.96) 100%);
}

.magic-poster-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    padding: 0 30px;
    text-align: center;
}

.magic-poster-text small {
    color: var(--gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .34em;
}

.magic-poster-text h2 {
    margin: 12px 0 8px;
    color: #f8c76a;
    font-family: Georgia, serif;
    font-size: clamp(76px, 9vw, 130px);
    line-height: .82;
    letter-spacing: .15em;
    text-shadow: 0 18px 60px rgba(0,0,0,.92);
}

.magic-poster-text p {
    color: #fff;
    font-size: 22px;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.magic-worlds,
.magic-heroes,
.magic-kit,
.magic-pricing {
    padding: 96px 0;
    background: #070b14;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.magic-section-title {
    max-width: 900px;
    margin: 0 auto 52px;
    text-align: center;
}

.magic-section-title.compact {
    max-width: 760px;
}

.magic-section-title h2 {
    margin-top: 16px;
    font-size: clamp(40px, 5.5vw, 76px);
    line-height: .92;
    letter-spacing: -.075em;
}

.magic-section-title p {
    max-width: 720px;
    margin: 18px auto 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.magic-world-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.world-card {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.12);
    background: #111;
    box-shadow: 0 28px 90px rgba(0,0,0,.40);
}

.world-card img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.world-card:hover img {
    transform: scale(1.06);
}

.world-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(0,0,0,.94));
}

.world-card.gold::before,
.world-card.violet::before,
.world-card.blue::before,
.world-card.shadow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .35;
}

.world-card.gold::before { background: radial-gradient(circle at 50% 18%, rgba(247,199,107,.55), transparent 45%); }
.world-card.violet::before { background: radial-gradient(circle at 50% 18%, rgba(135,92,255,.55), transparent 45%); }
.world-card.blue::before { background: radial-gradient(circle at 50% 18%, rgba(70,155,255,.55), transparent 45%); }
.world-card.shadow::before { background: radial-gradient(circle at 50% 18%, rgba(255,95,162,.42), transparent 45%); }

.world-card div {
    position: absolute;
    z-index: 3;
    left: 24px;
    right: 24px;
    bottom: 24px;
}

.world-card span {
    color: var(--gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .18em;
}

.world-card h3 {
    margin: 10px 0 8px;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -.05em;
}

.world-card p {
    color: #eee;
    font-size: 15px;
}

.magic-heroes {
    background: #05070d;
}

.magic-heroes-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.magic-heroes-strip article {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: 0 24px 70px rgba(0,0,0,.36);
}

.magic-heroes-strip img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.magic-heroes-strip article:hover img {
    transform: scale(1.05);
}

.magic-heroes-strip article::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.92));
}

.magic-heroes-strip div {
    position: absolute;
    z-index: 2;
    left: 22px;
    right: 22px;
    bottom: 22px;
}

.magic-heroes-strip h3 {
    font-family: Georgia, serif;
    font-size: 40px;
    letter-spacing: .08em;
}

.magic-heroes-strip p {
    color: #f2efff;
    margin-top: 4px;
}

.magic-kit {
    background:
        radial-gradient(circle at 22% 20%, rgba(247,199,107,.12), transparent 30%),
        #070b14;
}

.magic-kit-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 64px;
    align-items: center;
}

.magic-kit-copy h2 {
    margin-top: 16px;
    font-size: clamp(40px, 5vw, 70px);
    line-height: .94;
    letter-spacing: -.07em;
}

.magic-kit-copy p {
    margin-top: 22px;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.75;
}

.magic-kit-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.magic-kit-cards div {
    min-height: 210px;
    padding: 28px;
    border-radius: 24px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.magic-kit-cards strong {
    font-size: 34px;
}

.magic-kit-cards h3 {
    margin: 18px 0 10px;
    font-size: 24px;
}

.magic-kit-cards p {
    color: var(--muted);
    line-height: 1.65;
}

.magic-final {
    padding: 120px 0;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(247,199,107,.22), transparent 42%),
        #05070d;
}

.magic-final h2 {
    max-width: 880px;
    margin: 18px auto 34px;
    font-size: clamp(44px, 7vw, 90px);
    line-height: .9;
    letter-spacing: -.08em;
}

@media (max-width: 1100px) {
    .magic-hero-grid,
    .magic-kit-grid {
        grid-template-columns: 1fr;
    }

    .magic-world-grid,
    .magic-heroes-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .magic-poster,
    .magic-poster img {
        min-height: 500px;
        height: 500px;
    }
}

@media (max-width: 700px) {
    .magic-hero {
        min-height: auto;
    }

    .magic-hero-grid {
        min-height: auto;
        padding: 70px 0;
    }

    .magic-actions {
        flex-direction: column;
    }

    .magic-world-grid,
    .magic-heroes-strip,
    .magic-kit-cards {
        grid-template-columns: 1fr;
    }

    .magic-poster,
    .magic-poster img {
        min-height: 440px;
        height: 440px;
    }

    .magic-worlds,
    .magic-heroes,
    .magic-kit,
    .magic-pricing {
        padding: 74px 0;
    }
}
/* =====================================================
   PETVERSE AI - REFINED MAGICAL HOME
   Cole no final do assets/css/style.css
   ===================================================== */

.pv-refined-home {
    background: #05070d;
    color: #fff;
    overflow: hidden;
}

.refined-hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 28%, rgba(247,199,107,.20), transparent 25%),
        radial-gradient(circle at 18% 20%, rgba(98,78,255,.20), transparent 32%),
        linear-gradient(180deg, #070812 0%, #05070d 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.refined-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1px),
        radial-gradient(circle, rgba(247,199,107,.55) 1px, transparent 1px);
    background-size: 92px 92px, 148px 148px;
    background-position: 20px 20px, 70px 90px;
    opacity: .18;
}

.refined-aurora {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse at 70% 35%, rgba(247,199,107,.14), transparent 35%),
        radial-gradient(ellipse at 32% 65%, rgba(135,92,255,.12), transparent 34%);
    filter: blur(18px);
}

.refined-hero-grid {
    position: relative;
    z-index: 2;
    min-height: 760px;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 72px;
    align-items: center;
}

.refined-kicker {
    display: inline-flex;
    color: var(--gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.refined-copy h1 {
    max-width: 780px;
    margin-top: 20px;
    font-size: clamp(58px, 7vw, 104px);
    line-height: .86;
    letter-spacing: -.08em;
}

.refined-copy p {
    max-width: 640px;
    margin: 28px 0 0;
    color: #ebe6f7;
    font-size: 20px;
    line-height: 1.65;
}

.refined-actions {
    display: flex;
    gap: 14px;
    margin-top: 34px;
}

.refined-primary,
.refined-secondary {
    min-height: 58px;
    padding: 0 28px;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.refined-secondary {
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
}

.refined-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.refined-proof span {
    padding: 10px 14px;
    border-radius: 999px;
    color: #f2efff;
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
}

.refined-poster-stage {
    position: relative;
    min-height: 610px;
    display: grid;
    place-items: center;
}

.refined-portal {
    position: absolute;
    width: min(620px, 90%);
    height: min(620px, 90%);
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(247,199,107,.38) 0%, rgba(247,199,107,.10) 34%, transparent 66%);
    filter: blur(8px);
    opacity: .9;
}

.refined-poster {
    position: relative;
    width: min(500px, 92%);
    min-height: 620px;
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 44px 140px rgba(0,0,0,.60);
    transform: perspective(1200px) rotateY(-5deg);
}

.refined-poster img {
    width: 100%;
    height: 620px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.refined-poster-shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 55% 30%, rgba(247,199,107,.16), transparent 30%),
        linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,.96) 100%);
}

.refined-poster-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    padding: 0 30px;
    text-align: center;
}

.refined-poster-title small {
    color: var(--gold);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .30em;
}

.refined-poster-title h2 {
    margin: 12px 0 8px;
    color: #f8c76a;
    font-family: Georgia, serif;
    font-size: clamp(70px, 8vw, 118px);
    line-height: .82;
    letter-spacing: .14em;
    text-shadow: 0 18px 60px rgba(0,0,0,.92);
}

.refined-poster-title p {
    color: #fff;
    font-size: 19px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.refined-worlds,
.refined-process,
.refined-kit,
.refined-pricing {
    padding: 96px 0;
    background: #070b14;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.refined-section-title {
    max-width: 900px;
    margin: 0 auto 52px;
    text-align: center;
}

.refined-section-title.compact {
    max-width: 760px;
}

.refined-section-title h2 {
    margin-top: 16px;
    font-size: clamp(40px, 5.5vw, 76px);
    line-height: .92;
    letter-spacing: -.075em;
}

.refined-section-title p {
    max-width: 720px;
    margin: 18px auto 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.7;
}

.refined-world-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.refined-world-card {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    padding: 30px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)),
        #0b0d18;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 28px 90px rgba(0,0,0,.36);
}

.refined-world-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .38;
}

.refined-world-card.kingdom::before {
    background: radial-gradient(circle at 50% 22%, rgba(247,199,107,.70), transparent 42%);
}

.refined-world-card.magic::before {
    background: radial-gradient(circle at 50% 22%, rgba(135,92,255,.75), transparent 42%);
}

.refined-world-card.heroes::before {
    background: radial-gradient(circle at 50% 22%, rgba(255,95,162,.60), transparent 42%);
}

.refined-world-card.galaxy::before {
    background: radial-gradient(circle at 50% 22%, rgba(70,155,255,.72), transparent 42%);
}

.world-orb {
    position: relative;
    z-index: 2;
    width: 94px;
    height: 94px;
    margin-bottom: 54px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 35% 28%, #fff, rgba(247,199,107,.85) 20%, rgba(247,199,107,.18) 60%, transparent 72%);
    box-shadow: 0 0 70px rgba(247,199,107,.38);
}

.refined-world-card.magic .world-orb {
    background: radial-gradient(circle at 35% 28%, #fff, rgba(135,92,255,.85) 22%, rgba(135,92,255,.18) 62%, transparent 74%);
    box-shadow: 0 0 70px rgba(135,92,255,.38);
}

.refined-world-card.heroes .world-orb {
    background: radial-gradient(circle at 35% 28%, #fff, rgba(255,95,162,.86) 22%, rgba(255,95,162,.18) 62%, transparent 74%);
    box-shadow: 0 0 70px rgba(255,95,162,.32);
}

.refined-world-card.galaxy .world-orb {
    background: radial-gradient(circle at 35% 28%, #fff, rgba(70,155,255,.86) 22%, rgba(70,155,255,.18) 62%, transparent 74%);
    box-shadow: 0 0 70px rgba(70,155,255,.34);
}

.refined-world-card span,
.refined-world-card h3,
.refined-world-card p {
    position: relative;
    z-index: 2;
}

.refined-world-card span {
    color: var(--gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .18em;
}

.refined-world-card h3 {
    margin: 10px 0 10px;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -.05em;
}

.refined-world-card p {
    color: var(--muted);
    line-height: 1.65;
}

.refined-process {
    background: #05070d;
}

.refined-process-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 64px;
    align-items: start;
}

.refined-process-grid h2 {
    margin-top: 16px;
    font-size: clamp(40px, 5vw, 70px);
    line-height: .94;
    letter-spacing: -.07em;
}

.refined-steps {
    display: grid;
    gap: 18px;
}

.refined-steps div {
    padding: 28px;
    border-radius: 24px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
}

.refined-steps strong {
    color: var(--gold);
    font-size: 13px;
    letter-spacing: .18em;
}

.refined-steps h3 {
    margin: 12px 0 8px;
    font-size: 27px;
}

.refined-steps p {
    color: var(--muted);
    line-height: 1.65;
}

.refined-kit {
    background:
        radial-gradient(circle at 22% 20%, rgba(247,199,107,.12), transparent 30%),
        #070b14;
}

.refined-kit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.refined-kit-grid div {
    min-height: 220px;
    padding: 28px;
    border-radius: 24px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.refined-kit-grid strong {
    font-size: 34px;
}

.refined-kit-grid h3 {
    margin: 18px 0 10px;
    font-size: 24px;
}

.refined-kit-grid p {
    color: var(--muted);
    line-height: 1.65;
}

.refined-final {
    padding: 120px 0;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(247,199,107,.22), transparent 42%),
        #05070d;
}

.refined-final h2 {
    max-width: 880px;
    margin: 18px auto 34px;
    font-size: clamp(44px, 7vw, 90px);
    line-height: .9;
    letter-spacing: -.08em;
}

@media (max-width: 1100px) {
    .refined-hero-grid,
    .refined-process-grid {
        grid-template-columns: 1fr;
    }

    .refined-world-grid,
    .refined-kit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .refined-poster {
        transform: none;
    }
}

@media (max-width: 700px) {
    .refined-hero {
        min-height: auto;
    }

    .refined-hero-grid {
        min-height: auto;
        padding: 70px 0;
    }

    .refined-actions {
        flex-direction: column;
    }

    .refined-world-grid,
    .refined-kit-grid {
        grid-template-columns: 1fr;
    }

    .refined-poster,
    .refined-poster img {
        min-height: 450px;
        height: 450px;
    }

    .refined-worlds,
    .refined-process,
    .refined-kit,
    .refined-pricing {
        padding: 74px 0;
    }
}
/* =====================================================
   PETVERSE AI - FINAL MAGICAL HOME
   Cole no final do assets/css/style.css
   ===================================================== */

.pv-final-home {
    background: #05070d;
    color: #fff;
    overflow: hidden;
}

.final-hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    background:
        radial-gradient(circle at 73% 30%, rgba(247,199,107,.22), transparent 26%),
        radial-gradient(circle at 19% 22%, rgba(120,92,255,.22), transparent 34%),
        linear-gradient(180deg, #070812 0%, #05070d 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.final-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.88) 1px, transparent 1px),
        radial-gradient(circle, rgba(247,199,107,.58) 1px, transparent 1px);
    background-size: 92px 92px, 148px 148px;
    background-position: 20px 20px, 70px 90px;
    opacity: .18;
}

.final-aurora {
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(ellipse at 74% 36%, rgba(247,199,107,.16), transparent 34%),
        radial-gradient(ellipse at 30% 64%, rgba(135,92,255,.13), transparent 34%);
    filter: blur(20px);
}

.final-hero-grid {
    position: relative;
    z-index: 2;
    min-height: 760px;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 72px;
    align-items: center;
}

.final-kicker {
    display: inline-flex;
    color: var(--gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.final-hero-copy h1 {
    max-width: 780px;
    margin-top: 22px;
    font-size: clamp(62px, 7.4vw, 112px);
    line-height: .84;
    letter-spacing: -.085em;
}

.final-hero-copy p {
    max-width: 560px;
    margin: 30px 0 0;
    color: #ebe6f7;
    font-size: 23px;
    line-height: 1.48;
}

.final-hero-actions {
    margin-top: 36px;
}

.final-primary-btn {
    min-height: 60px;
    padding: 0 32px;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.final-poster-stage {
    position: relative;
    min-height: 625px;
    display: grid;
    place-items: center;
}

.final-portal {
    position: absolute;
    width: min(640px, 92%);
    height: min(640px, 92%);
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(247,199,107,.40) 0%, rgba(247,199,107,.11) 36%, transparent 66%);
    filter: blur(10px);
    opacity: .95;
}

.final-poster-card {
    position: relative;
    width: min(510px, 92%);
    min-height: 625px;
    overflow: hidden;
    border-radius: 36px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 48px 150px rgba(0,0,0,.66);
    transform: perspective(1200px) rotateY(-4deg);
}

.final-poster-card img {
    width: 100%;
    height: 625px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.final-poster-shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 55% 30%, rgba(247,199,107,.16), transparent 30%),
        linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.96) 100%);
}

.final-poster-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 36px;
    padding: 0 30px;
    text-align: center;
}

.final-poster-text small {
    color: var(--gold);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .30em;
}

.final-poster-text h2 {
    margin: 12px 0 8px;
    color: #f8c76a;
    font-family: Georgia, serif;
    font-size: clamp(72px, 8vw, 120px);
    line-height: .82;
    letter-spacing: .14em;
    text-shadow: 0 18px 60px rgba(0,0,0,.92);
}

.final-poster-text p {
    color: #fff;
    font-size: 19px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.final-worlds,
.final-process,
.final-kit,
.final-pricing {
    padding: 98px 0;
    background: #070b14;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.final-section-title {
    max-width: 900px;
    margin: 0 auto 54px;
    text-align: center;
}

.final-section-title.compact {
    max-width: 760px;
}

.final-section-title h2 {
    margin-top: 16px;
    font-size: clamp(40px, 5.5vw, 76px);
    line-height: .92;
    letter-spacing: -.075em;
}

.final-world-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.final-world-card {
    position: relative;
    min-height: 350px;
    overflow: hidden;
    padding: 32px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
        #0b0d18;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 28px 90px rgba(0,0,0,.36);
}

.final-world-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
}

.world-gold::before {
    background: radial-gradient(circle at 50% 22%, rgba(247,199,107,.70), transparent 42%);
}

.world-purple::before {
    background: radial-gradient(circle at 50% 22%, rgba(135,92,255,.75), transparent 42%);
}

.world-pink::before {
    background: radial-gradient(circle at 50% 22%, rgba(255,95,162,.60), transparent 42%);
}

.world-blue::before {
    background: radial-gradient(circle at 50% 22%, rgba(70,155,255,.72), transparent 42%);
}

.final-world-icon {
    position: relative;
    z-index: 2;
    width: 94px;
    height: 94px;
    margin-bottom: 62px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 38px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 0 70px rgba(247,199,107,.28);
}

.final-world-card h3,
.final-world-card p {
    position: relative;
    z-index: 2;
}

.final-world-card h3 {
    margin-bottom: 12px;
    font-size: 31px;
    line-height: 1;
    letter-spacing: -.05em;
}

.final-world-card p {
    color: var(--muted);
    line-height: 1.65;
}

.final-process {
    background: #05070d;
}

.final-timeline {
    display: grid;
    grid-template-columns: 1fr 80px 1fr 80px 1fr;
    gap: 18px;
    align-items: center;
}

.final-timeline-item {
    min-height: 280px;
    padding: 34px 28px;
    text-align: center;
    border-radius: 28px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.final-timeline-icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 36px;
    background: rgba(247,199,107,.12);
    border: 1px solid rgba(247,199,107,.22);
}

.final-timeline-item h3 {
    font-size: 28px;
    margin-bottom: 12px;
}

.final-timeline-item p {
    color: var(--muted);
    line-height: 1.65;
}

.final-timeline-line {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(247,199,107,.72), transparent);
}

.final-kit {
    background:
        radial-gradient(circle at 22% 20%, rgba(247,199,107,.12), transparent 30%),
        #070b14;
}

.final-kit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.final-kit-card {
    min-height: 240px;
    padding: 30px;
    border-radius: 26px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.final-kit-card strong {
    font-size: 36px;
}

.final-kit-card h3 {
    margin: 20px 0 10px;
    font-size: 24px;
}

.final-kit-card p {
    color: var(--muted);
    line-height: 1.65;
}

.final-cta {
    padding: 120px 0;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(247,199,107,.22), transparent 42%),
        #05070d;
}

.final-cta h2 {
    max-width: 900px;
    margin: 18px auto 34px;
    font-size: clamp(44px, 7vw, 90px);
    line-height: .9;
    letter-spacing: -.08em;
}

@media (max-width: 1100px) {
    .final-hero-grid {
        grid-template-columns: 1fr;
    }

    .final-world-grid,
    .final-kit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .final-timeline {
        grid-template-columns: 1fr;
    }

    .final-timeline-line {
        width: 2px;
        height: 48px;
        margin: 0 auto;
        background: linear-gradient(180deg, transparent, rgba(247,199,107,.72), transparent);
    }

    .final-poster-card {
        transform: none;
    }
}

@media (max-width: 700px) {
    .final-hero {
        min-height: auto;
    }

    .final-hero-grid {
        min-height: auto;
        padding: 70px 0;
    }

    .final-world-grid,
    .final-kit-grid {
        grid-template-columns: 1fr;
    }

    .final-poster-card,
    .final-poster-card img {
        min-height: 450px;
        height: 450px;
    }

    .final-worlds,
    .final-process,
    .final-kit,
    .final-pricing {
        padding: 74px 0;
    }
}

/* =====================================================
   PETVERSE AI - CUTE PREMIUM HOME
   Cole no final do assets/css/style.css
   ===================================================== */

.cute-home {
    background: #080812;
    color: #fff;
    overflow: hidden;
}

.cute-hero {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 24%, rgba(247,199,107,.22), transparent 27%),
        radial-gradient(circle at 18% 20%, rgba(135,92,255,.20), transparent 32%),
        linear-gradient(180deg, #0b0b18 0%, #080812 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.cute-bg-glow {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse at 74% 35%, rgba(247,199,107,.18), transparent 32%),
        radial-gradient(ellipse at 30% 65%, rgba(255,95,162,.11), transparent 34%);
    filter: blur(24px);
}

.cute-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1px),
        radial-gradient(circle, rgba(247,199,107,.5) 1px, transparent 1px);
    background-size: 90px 90px, 140px 140px;
    background-position: 20px 30px, 70px 80px;
    opacity: .15;
}

.cute-hero-grid {
    position: relative;
    z-index: 2;
    min-height: 720px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 68px;
    align-items: center;
}

.cute-kicker {
    display: inline-flex;
    color: var(--gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.cute-copy h1 {
    max-width: 780px;
    margin-top: 20px;
    font-size: clamp(54px, 7vw, 96px);
    line-height: .9;
    letter-spacing: -.075em;
}

.cute-copy p {
    max-width: 620px;
    margin: 26px 0 0;
    color: #e8e3f5;
    font-size: 20px;
    line-height: 1.62;
}

.cute-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.cute-primary,
.cute-secondary {
    min-height: 58px;
    padding: 0 28px;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.cute-secondary {
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
}

.cute-mini-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.cute-mini-proof span {
    padding: 10px 14px;
    border-radius: 999px;
    color: #f2efff;
    font-size: 13px;
    font-weight: 800;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
}

.cute-poster-wrap {
    position: relative;
    display: grid;
    place-items: center;
}

.cute-poster-wrap::before {
    content: "";
    position: absolute;
    width: min(620px, 92%);
    height: min(620px, 92%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(247,199,107,.32), rgba(247,199,107,.08) 38%, transparent 68%);
    filter: blur(12px);
}

.cute-poster-card {
    position: relative;
    width: min(500px, 92%);
    min-height: 590px;
    overflow: hidden;
    border-radius: 34px;
    background: #111;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 42px 130px rgba(0,0,0,.58);
}

.cute-poster-card img {
    width: 100%;
    height: 590px;
    object-fit: cover;
    display: block;
}

.cute-poster-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 55% 28%, rgba(247,199,107,.16), transparent 30%),
        linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.32) 44%, rgba(0,0,0,.92) 100%);
}

.cute-poster-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    padding: 0 28px;
    text-align: center;
}

.cute-poster-content small {
    color: var(--gold);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .28em;
}

.cute-poster-content h2 {
    margin: 12px 0 8px;
    color: #f8c76a;
    font-family: Georgia, serif;
    font-size: clamp(70px, 8vw, 112px);
    line-height: .82;
    letter-spacing: .13em;
    text-shadow: 0 18px 60px rgba(0,0,0,.9);
}

.cute-poster-content p {
    color: #fff;
    font-size: 18px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.cute-worlds,
.cute-how,
.cute-kit,
.cute-pricing {
    padding: 92px 0;
    background: #0b0b18;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.cute-section-title {
    max-width: 860px;
    margin: 0 auto 48px;
    text-align: center;
}

.cute-section-title h2 {
    margin-top: 14px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: .94;
    letter-spacing: -.065em;
}

.cute-section-title p {
    color: var(--muted);
    margin-top: 14px;
    font-size: 18px;
}

.cute-world-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.cute-world-card {
    position: relative;
    min-height: 300px;
    padding: 30px;
    overflow: hidden;
    border-radius: 28px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.cute-world-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .34;
}

.cute-world-card.gold::before {
    background: radial-gradient(circle at 50% 20%, rgba(247,199,107,.75), transparent 44%);
}

.cute-world-card.purple::before {
    background: radial-gradient(circle at 50% 20%, rgba(135,92,255,.75), transparent 44%);
}

.cute-world-card.pink::before {
    background: radial-gradient(circle at 50% 20%, rgba(255,95,162,.65), transparent 44%);
}

.cute-world-card.blue::before {
    background: radial-gradient(circle at 50% 20%, rgba(80,170,255,.72), transparent 44%);
}

.cute-icon {
    position: relative;
    z-index: 2;
    width: 86px;
    height: 86px;
    display: grid;
    place-items: center;
    margin-bottom: 54px;
    border-radius: 999px;
    font-size: 36px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.13);
}

.cute-world-card h3,
.cute-world-card p {
    position: relative;
    z-index: 2;
}

.cute-world-card h3 {
    font-size: 28px;
    margin-bottom: 10px;
    letter-spacing: -.04em;
}

.cute-world-card p {
    color: var(--muted);
    line-height: 1.6;
}

.cute-how {
    background: #080812;
}

.cute-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.cute-step {
    min-height: 280px;
    padding: 32px;
    text-align: center;
    border-radius: 28px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.cute-step strong {
    color: var(--gold);
    font-size: 13px;
    letter-spacing: .18em;
}

.cute-step div {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin: 24px auto;
    border-radius: 999px;
    font-size: 36px;
    background: rgba(247,199,107,.12);
    border: 1px solid rgba(247,199,107,.22);
}

.cute-step h3 {
    font-size: 27px;
    margin-bottom: 10px;
}

.cute-step p {
    color: var(--muted);
    line-height: 1.6;
}

.cute-kit {
    background:
        radial-gradient(circle at 22% 20%, rgba(247,199,107,.11), transparent 30%),
        #0b0b18;
}

.cute-kit-grid {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 58px;
    align-items: center;
}

.cute-kit-copy h2 {
    margin-top: 14px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: .94;
    letter-spacing: -.065em;
}

.cute-kit-copy p {
    color: var(--muted);
    margin: 22px 0 30px;
    font-size: 18px;
    line-height: 1.7;
}

.cute-kit-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.cute-kit-cards div {
    min-height: 180px;
    padding: 28px;
    border-radius: 24px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.cute-kit-cards span {
    font-size: 34px;
}

.cute-kit-cards h3 {
    margin-top: 18px;
    font-size: 24px;
}

.cute-final {
    padding: 110px 0;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(247,199,107,.20), transparent 42%),
        #080812;
}

.cute-final h2 {
    max-width: 820px;
    margin: 18px auto 32px;
    font-size: clamp(42px, 6vw, 78px);
    line-height: .92;
    letter-spacing: -.07em;
}

@media (max-width: 1100px) {
    .cute-hero-grid,
    .cute-kit-grid {
        grid-template-columns: 1fr;
    }

    .cute-world-grid,
    .cute-kit-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .cute-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .cute-hero {
        min-height: auto;
    }

    .cute-hero-grid {
        min-height: auto;
        padding: 68px 0;
    }

    .cute-actions {
        flex-direction: column;
    }

    .cute-world-grid,
    .cute-kit-cards {
        grid-template-columns: 1fr;
    }

    .cute-poster-card,
    .cute-poster-card img {
        min-height: 440px;
        height: 440px;
    }

    .cute-worlds,
    .cute-how,
    .cute-kit,
    .cute-pricing {
        padding: 72px 0;
    }
}
/* =====================================================
   PETVERSE AI - BEFORE AFTER SECTION ADDON
   Cole no final de assets/css/style.css
   ===================================================== */

.cute-transform {
    padding: 92px 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(247,199,107,.12), transparent 34%),
        #080812;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.cute-transform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.cute-transform-card {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 10px;
    padding: 10px;
    border-radius: 28px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.cute-before,
.cute-after {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255,255,255,.06);
}

.cute-before img,
.cute-after img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    display: block;
}

.cute-before::after,
.cute-after::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.78));
}

.cute-before span,
.cute-after span {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.cute-after div {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    bottom: 18px;
}

.cute-after h3 {
    font-size: 23px;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.cute-after p {
    margin-top: 5px;
    color: #f1edff;
    font-size: 13px;
}

.cute-transform-cta {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

@media (max-width: 1100px) {
    .cute-transform-grid {
        grid-template-columns: 1fr;
    }

    .cute-transform-card {
        max-width: 720px;
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    .cute-transform {
        padding: 72px 0;
    }

    .cute-transform-card {
        grid-template-columns: 1fr;
    }

    .cute-before,
    .cute-after,
    .cute-before img,
    .cute-after img {
        min-height: 280px;
        height: 280px;
    }
}

/* =====================================================
   PETVERSE AI - CONVERSION HOME V3
   Resolve: hero, before/after, worlds with images, emotional section, lighter premium look
   Cole no final de assets/css/style.css
   ===================================================== */

.pv-conversion-home {
    background: #100d1d;
    color: #fff;
    overflow: hidden;
}

.conv-hero {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 24%, rgba(247,199,107,.22), transparent 27%),
        radial-gradient(circle at 18% 20%, rgba(135,92,255,.18), transparent 32%),
        linear-gradient(180deg, #151226 0%, #100d1d 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.conv-hero-soft-bg {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse at 74% 35%, rgba(247,199,107,.18), transparent 32%),
        radial-gradient(ellipse at 30% 65%, rgba(255,95,162,.12), transparent 34%);
    filter: blur(24px);
}

.conv-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1px),
        radial-gradient(circle, rgba(247,199,107,.5) 1px, transparent 1px);
    background-size: 90px 90px, 140px 140px;
    background-position: 20px 30px, 70px 80px;
    opacity: .13;
}

.conv-hero-grid {
    position: relative;
    z-index: 2;
    min-height: 720px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 68px;
    align-items: center;
}

.conv-kicker {
    display: inline-flex;
    color: var(--gold);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.conv-hero-copy h1 {
    max-width: 810px;
    margin-top: 20px;
    font-size: clamp(54px, 7vw, 94px);
    line-height: .9;
    letter-spacing: -.075em;
}

.conv-hero-copy p {
    max-width: 620px;
    margin: 26px 0 0;
    color: #f2edf8;
    font-size: 21px;
    line-height: 1.58;
}

.conv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.conv-primary,
.conv-secondary {
    min-height: 58px;
    padding: 0 28px;
    text-transform: uppercase;
    letter-spacing: .025em;
}

.conv-secondary {
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
}

.conv-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.conv-proof span {
    padding: 10px 14px;
    border-radius: 999px;
    color: #f2efff;
    font-size: 13px;
    font-weight: 800;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.10);
}

.conv-hero-art {
    position: relative;
    display: grid;
    place-items: center;
}

.conv-hero-glow {
    position: absolute;
    width: min(620px, 92%);
    height: min(620px, 92%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(247,199,107,.32), rgba(247,199,107,.08) 38%, transparent 68%);
    filter: blur(14px);
}

.conv-poster-card {
    position: relative;
    width: min(500px, 92%);
    min-height: 590px;
    overflow: hidden;
    border-radius: 34px;
    background: #111;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 42px 130px rgba(0,0,0,.58);
}

.conv-poster-card img {
    width: 100%;
    height: 590px;
    object-fit: cover;
    display: block;
}

.conv-poster-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 55% 28%, rgba(247,199,107,.16), transparent 30%),
        linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.32) 44%, rgba(0,0,0,.92) 100%);
}

.conv-poster-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    padding: 0 28px;
    text-align: center;
}

.conv-poster-text small {
    color: var(--gold);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .28em;
}

.conv-poster-text h2 {
    margin: 12px 0 8px;
    color: #f8c76a;
    font-family: Georgia, serif;
    font-size: clamp(70px, 8vw, 112px);
    line-height: .82;
    letter-spacing: .13em;
    text-shadow: 0 18px 60px rgba(0,0,0,.9);
}

.conv-poster-text p {
    color: #fff;
    font-size: 18px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.conv-transform,
.conv-worlds,
.conv-love,
.conv-how,
.conv-kit,
.conv-pricing {
    padding: 92px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.conv-transform,
.conv-love,
.conv-kit {
    background:
        radial-gradient(circle at 50% 0%, rgba(247,199,107,.10), transparent 34%),
        #151226;
}

.conv-worlds,
.conv-how,
.conv-pricing {
    background: #100d1d;
}

.conv-section-title {
    max-width: 880px;
    margin: 0 auto 48px;
    text-align: center;
}

.conv-section-title h2 {
    margin-top: 14px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: .94;
    letter-spacing: -.065em;
}

.conv-section-title p {
    color: #cfc8e5;
    margin-top: 14px;
    font-size: 18px;
    line-height: 1.65;
}

.conv-transform-stack {
    display: grid;
    gap: 28px;
}

.conv-big-transform {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 34px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
}

.conv-big-transform.reverse {
    grid-template-columns: 1.1fr .9fr;
}

.conv-big-transform.reverse .conv-after {
    order: 1;
}

.conv-big-transform.reverse .conv-before {
    order: 2;
}

.conv-before,
.conv-after {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255,255,255,.06);
}

.conv-before img,
.conv-after img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;
}

.conv-before::after,
.conv-after::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.82));
}

.conv-before span,
.conv-after span {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 18px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.conv-after div {
    position: absolute;
    z-index: 2;
    left: 28px;
    right: 28px;
    bottom: 28px;
}

.conv-after small {
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.conv-after h3 {
    margin-top: 10px;
    font-size: clamp(30px, 4vw, 54px);
    line-height: .95;
    letter-spacing: -.06em;
}

.conv-after p {
    margin-top: 10px;
    color: #f1edff;
    font-size: 16px;
}

.conv-center-cta {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

.conv-world-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.conv-world-card {
    position: relative;
    min-height: 330px;
    overflow: hidden;
    border-radius: 28px;
    background: #111;
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.conv-world-card img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.conv-world-card:hover img {
    transform: scale(1.05);
}

.conv-world-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.92));
}

.conv-world-card div {
    position: absolute;
    z-index: 2;
    left: 22px;
    right: 22px;
    bottom: 22px;
}

.conv-world-card span {
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.conv-world-card h3 {
    margin-top: 10px;
    font-size: 26px;
    letter-spacing: -.04em;
}

.conv-love-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.conv-love-grid div,
.conv-step,
.conv-kit-cards div {
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.conv-love-grid div {
    min-height: 260px;
    padding: 34px;
    border-radius: 28px;
    text-align: center;
}

.conv-love-grid strong {
    font-size: 42px;
}

.conv-love-grid h3 {
    margin: 20px 0 12px;
    font-size: 28px;
}

.conv-love-grid p {
    color: #cfc8e5;
    line-height: 1.65;
}

.conv-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.conv-step {
    min-height: 280px;
    padding: 32px;
    text-align: center;
    border-radius: 28px;
}

.conv-step strong {
    color: var(--gold);
    font-size: 13px;
    letter-spacing: .18em;
}

.conv-step div {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    margin: 24px auto;
    border-radius: 999px;
    font-size: 36px;
    background: rgba(247,199,107,.12);
    border: 1px solid rgba(247,199,107,.22);
}

.conv-step h3 {
    font-size: 27px;
    margin-bottom: 10px;
}

.conv-step p {
    color: #cfc8e5;
    line-height: 1.6;
}

.conv-kit-grid {
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    gap: 58px;
    align-items: center;
}

.conv-kit-copy h2 {
    margin-top: 14px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: .94;
    letter-spacing: -.065em;
}

.conv-kit-copy p {
    color: #cfc8e5;
    margin: 22px 0 30px;
    font-size: 18px;
    line-height: 1.7;
}

.conv-kit-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.conv-kit-cards div {
    min-height: 180px;
    padding: 28px;
    border-radius: 24px;
}

.conv-kit-cards span {
    font-size: 34px;
}

.conv-kit-cards h3 {
    margin-top: 18px;
    font-size: 24px;
}

.conv-final {
    padding: 110px 0;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(247,199,107,.20), transparent 42%),
        #100d1d;
}

.conv-final h2 {
    max-width: 820px;
    margin: 18px auto 32px;
    font-size: clamp(42px, 6vw, 78px);
    line-height: .92;
    letter-spacing: -.07em;
}

@media (max-width: 1100px) {
    .conv-hero-grid,
    .conv-kit-grid {
        grid-template-columns: 1fr;
    }

    .conv-world-grid,
    .conv-kit-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .conv-steps,
    .conv-love-grid {
        grid-template-columns: 1fr;
    }

    .conv-big-transform,
    .conv-big-transform.reverse {
        grid-template-columns: 1fr;
    }

    .conv-big-transform.reverse .conv-after,
    .conv-big-transform.reverse .conv-before {
        order: unset;
    }
}

@media (max-width: 700px) {
    .conv-hero {
        min-height: auto;
    }

    .conv-hero-grid {
        min-height: auto;
        padding: 68px 0;
    }

    .conv-actions {
        flex-direction: column;
    }

    .conv-world-grid,
    .conv-kit-cards {
        grid-template-columns: 1fr;
    }

    .conv-poster-card,
    .conv-poster-card img {
        min-height: 440px;
        height: 440px;
    }

    .conv-before,
    .conv-after,
    .conv-before img,
    .conv-after img {
        min-height: 300px;
        height: 300px;
    }

    .conv-transform,
    .conv-worlds,
    .conv-love,
    .conv-how,
    .conv-kit,
    .conv-pricing {
        padding: 72px 0;
    }
}

/* =====================================================
   PETVERSE AI - CONVERSION HOME V4 ADDON
   Cole no final de assets/css/style.css
   ===================================================== */

.conv-demo-video,
.conv-testimonials,
.conv-faq {
    padding: 92px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.conv-demo-video,
.conv-faq {
    background: #100d1d;
}

.conv-testimonials {
    background:
        radial-gradient(circle at 50% 0%, rgba(247,199,107,.10), transparent 34%),
        #151226;
}

.conv-video-shell {
    max-width: 980px;
    margin: 0 auto;
    padding: 14px;
    border-radius: 34px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
}

.conv-video-placeholder {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 24px;
    background: #111;
}

.conv-video-placeholder img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

.conv-video-placeholder iframe,
.conv-video-placeholder video {
    width: 100%;
    height: 520px;
    border: 0;
    display: block;
    border-radius: 24px;
    background: #000;
}

.conv-video-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 30px;
    background:
        radial-gradient(circle at center, rgba(247,199,107,.16), transparent 34%),
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.72));
}

.conv-play-button {
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border: 2px solid rgba(255,255,255,.38);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 38px;
}

.conv-video-overlay h3 {
    font-size: clamp(34px, 5vw, 64px);
    line-height: .95;
    letter-spacing: -.06em;
}

.conv-video-overlay p {
    margin-top: 10px;
    color: #f3eefc;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
}

.conv-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.conv-testimonial-grid article {
    min-height: 290px;
    padding: 34px;
    border-radius: 28px;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.conv-testimonial-grid span {
    color: var(--gold);
    font-size: 18px;
    letter-spacing: .08em;
}

.conv-testimonial-grid p {
    margin: 22px 0 24px;
    color: #f0ebfb;
    font-size: 18px;
    line-height: 1.65;
}

.conv-testimonial-grid strong {
    display: block;
    font-size: 18px;
}

.conv-testimonial-grid small {
    display: block;
    margin-top: 5px;
    color: #cfc8e5;
}

.conv-faq-list {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.conv-faq-list details {
    padding: 24px 26px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: none;
}

.conv-faq-list summary {
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.conv-faq-list p {
    margin-top: 14px;
    color: #cfc8e5;
    line-height: 1.7;
}

@media (max-width: 1000px) {
    .conv-testimonial-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .conv-demo-video,
    .conv-testimonials,
    .conv-faq {
        padding: 72px 0;
    }

    .conv-video-placeholder,
    .conv-video-placeholder img,
    .conv-video-placeholder iframe,
    .conv-video-placeholder video {
        min-height: 320px;
        height: 320px;
    }

    .conv-play-button {
        width: 82px;
        height: 82px;
        font-size: 30px;
    }
}

/* =====================================================
   PETVERSE AI - VERIFIED FEEDBACK CSS
   Cole no final do assets/css/style.css
   ===================================================== */

.conv-trust-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: -20px auto 34px;
}

.conv-trust-badges span {
    padding: 9px 13px;
    border-radius: 999px;
    color: #f0ebfb;
    font-size: 12px;
    font-weight: 850;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
}

.conv-testimonial-empty {
    max-width: 760px;
    margin: 0 auto;
    padding: 36px;
    text-align: center;
    border-radius: 28px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.conv-testimonial-empty h3 {
    font-size: 30px;
    margin-bottom: 10px;
}

.conv-testimonial-empty p {
    color: #cfc8e5;
    line-height: 1.7;
}

.dashboard-feedback {
    margin-top: 36px;
}

.feedback-card {
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 28px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.feedback-head {
    margin-bottom: 24px;
}

.feedback-head h2 {
    font-size: 34px;
    margin-bottom: 10px;
}

.feedback-head p {
    color: var(--muted);
    line-height: 1.7;
}

.feedback-form {
    display: grid;
    gap: 14px;
}

.alert-success {
    background: rgba(80,255,150,.12);
    border: 1px solid rgba(80,255,150,.28);
    color: #bfffd3;
}

.feedback-form textarea {
    min-height: 130px;
}

/* =====================================================
   PETVERSE AI - V5 CONVERSION + DASHBOARD FEEDBACK CSS
   Cole no final de assets/css/style.css
   ===================================================== */

.conv-metrics-row {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: -48px;
    padding-bottom: 34px;
}

.conv-metric-pill {
    padding: 22px 24px;
    border-radius: 22px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
    text-align: center;
    backdrop-filter: blur(12px);
}

.conv-metric-pill strong {
    display: block;
    font-size: 34px;
    line-height: 1;
    color: #fff;
}

.conv-metric-pill span {
    display: block;
    margin-top: 8px;
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.conv-demo-video,
.conv-receive,
.conv-testimonials,
.conv-faq {
    padding: 92px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.conv-demo-video,
.conv-faq,
.conv-receive {
    background: #100d1d;
}

.conv-testimonials {
    background:
        radial-gradient(circle at 50% 0%, rgba(247,199,107,.10), transparent 34%),
        #151226;
}

.conv-video-shell {
    max-width: 980px;
    margin: 0 auto;
    padding: 14px;
    border-radius: 34px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
}

.conv-video-placeholder {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 24px;
    background: #111;
}

.conv-video-placeholder img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;
}

.conv-video-placeholder iframe,
.conv-video-placeholder video {
    width: 100%;
    height: 520px;
    border: 0;
    display: block;
    border-radius: 24px;
    background: #000;
}

.conv-video-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 30px;
    background:
        radial-gradient(circle at center, rgba(247,199,107,.16), transparent 34%),
        linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.72));
}

.conv-play-button {
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border: 2px solid rgba(255,255,255,.38);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 38px;
}

.conv-video-overlay h3 {
    font-size: clamp(34px, 5vw, 64px);
    line-height: .95;
    letter-spacing: -.06em;
}

.conv-video-overlay p {
    margin-top: 10px;
    color: #f3eefc;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 800;
}

.conv-transform-arrow {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold), var(--pink));
    color: #111;
    font-size: 28px;
    font-weight: 900;
    box-shadow: 0 16px 45px rgba(0,0,0,.35);
}

.conv-big-transform {
    position: relative;
}

.conv-receive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.conv-receive-grid article {
    padding: 16px;
    border-radius: 28px;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.receive-visual,
.receive-story-card,
.receive-social-card {
    min-height: 230px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
}

.receive-visual img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    display: block;
}

.receive-story-card {
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(247,199,107,.2), transparent 42%),
        rgba(255,255,255,.06);
}

.receive-story-card span {
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.receive-story-card strong {
    display: block;
    margin-top: 28px;
    font-size: 42px;
    font-family: Georgia, serif;
}

.receive-story-card p {
    margin-top: 10px;
    color: #f0ebfb;
    line-height: 1.55;
}

.receive-social-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 18px;
    align-items: end;
    background:
        radial-gradient(circle at center, rgba(135,92,255,.2), transparent 45%),
        rgba(255,255,255,.06);
}

.receive-social-card span {
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.11);
    color: #fff;
    font-weight: 900;
}

.receive-social-card span:nth-child(1) { height: 190px; }
.receive-social-card span:nth-child(2) { height: 130px; }
.receive-social-card span:nth-child(3) { height: 90px; }

.conv-receive-grid h3 {
    margin: 18px 0 8px;
    font-size: 24px;
}

.conv-receive-grid article > p {
    color: #cfc8e5;
    line-height: 1.6;
}

.conv-testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.conv-testimonial-grid article {
    min-height: 290px;
    padding: 34px;
    border-radius: 28px;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: var(--shadow);
}

.conv-testimonial-grid span {
    color: var(--gold);
    font-size: 18px;
    letter-spacing: .08em;
}

.conv-testimonial-grid p {
    margin: 22px 0 24px;
    color: #f0ebfb;
    font-size: 18px;
    line-height: 1.65;
}

.conv-testimonial-grid strong {
    display: block;
    font-size: 18px;
}

.conv-testimonial-grid small {
    display: block;
    margin-top: 5px;
    color: #cfc8e5;
}

.conv-faq-list {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.conv-faq-list details {
    padding: 24px 26px;
    border-radius: 22px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: none;
}

.conv-faq-list summary {
    cursor: pointer;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.conv-faq-list p {
    margin-top: 14px;
    color: #cfc8e5;
    line-height: 1.7;
}

.dashboard-feedback {
    margin-top: 36px;
}

.feedback-card,
.admin-feedback-card {
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 28px;
    padding: 30px;
    box-shadow: var(--shadow);
}

.feedback-head {
    margin-bottom: 24px;
}

.feedback-head h2 {
    font-size: 34px;
    margin-bottom: 10px;
}

.feedback-head p {
    color: var(--muted);
    line-height: 1.7;
}

.feedback-form {
    display: grid;
    gap: 14px;
}

.alert-success {
    background: rgba(80,255,150,.12);
    border: 1px solid rgba(80,255,150,.28);
    color: #bfffd3;
}

.admin-feedback-list {
    display: grid;
    gap: 18px;
}

.admin-feedback-card small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
}

.admin-feedback-card p {
    color: #f0ebfb;
    line-height: 1.7;
    margin: 18px 0;
}

.admin-feedback-card form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 1100px) {
    .conv-receive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .conv-testimonial-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .conv-metrics-row,
    .conv-receive-grid {
        grid-template-columns: 1fr;
    }

    .conv-metrics-row {
        margin-top: 0;
    }

    .conv-demo-video,
    .conv-receive,
    .conv-testimonials,
    .conv-faq {
        padding: 72px 0;
    }

    .conv-video-placeholder,
    .conv-video-placeholder img,
    .conv-video-placeholder iframe,
    .conv-video-placeholder video {
        min-height: 320px;
        height: 320px;
    }

    .conv-play-button {
        width: 82px;
        height: 82px;
        font-size: 30px;
    }

    .conv-transform-arrow {
        left: 50%;
        top: 50%;
    }
}


<style>
body { background: red !important; }
</style>