/* ==========================================
   1. FONTES E VARIÁVEIS
========================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --bg: #0c0914;
    --bg-soft: #110d1b;
    --surface: #1b1429;

    --purple: #a476ff;
    --purple-light: #bda1ff;
    --purple-dark: #8652ed;

    --text: #f8f5ff;
    --muted: #a9a2ba;

    --border: #352743;

    --font-body: 'DM Sans', Arial, sans-serif;
    --font-title: 'Space Grotesk', sans-serif;
}


/* ==========================================
   2. RESET E CONFIGURAÇÕES GERAIS
========================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}

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

button,
input,
select {
    font: inherit;
}

img {
    max-width: 100%;
}

section[id],
div[id] {
    scroll-margin-top: 30px;
}


/* ==========================================
   3. CABEÇALHO
========================================== */

.topbar {
    height: 83px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 max(5vw, 24px);

    border-bottom: 1px solid #ffffff13;

    position: relative;
    z-index: 2;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;

    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

.brand b {
    color: var(--purple-light);
}

.mark {
    font-size: 32px;
    color: #ad82ff;
}

.topbar nav {
    display: flex;
    gap: 32px;

    color: #c5bdd2;
    font-size: 14px;
}

.topbar nav a {
    transition: color 0.2s;
}

.topbar nav a:hover {
    color: white;
}


/* ==========================================
   4. BOTÕES
========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 15px 22px;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 700;

    transition:
            transform 0.2s,
            box-shadow 0.2s,
            background 0.2s;
}

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

.btn-outline {
    border: 1px solid #6e567f;
}

.btn-outline:hover {
    background: #a476ff16;
    border-color: var(--purple);
}

.btn-primary {
    background: linear-gradient(
            110deg,
            #8652ed,
            #b28cff
    );

    color: white;

    box-shadow: 0 8px 36px #8545ff40;
}

.btn-primary:hover {
    box-shadow: 0 12px 42px #8545ff65;
}

.btn-ghost {
    color: #c3b9d3;
}

.btn-ghost:hover {
    color: white;
}


/* ==========================================
   5. HERO - APRESENTAÇÃO PRINCIPAL
========================================== */

.hero {
    position: relative;

    padding: 96px 20px 65px;

    text-align: center;

    overflow: hidden;
}

.glow {
    position: absolute;

    width: 850px;
    height: 600px;

    left: 50%;
    top: 20px;

    transform: translateX(-50%);

    background: radial-gradient(
            ellipse,
            #6627c73d,
            transparent 67%
    );

    pointer-events: none;
}

.eyebrow,
.section-kicker {
    color: #c6a9ff;

    letter-spacing: 2.8px;

    font-size: 11px;
    font-weight: 800;
}

.dot {
    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 8px;

    background: #a67bff;

    border-radius: 50%;
}

.hero h1 {
    font-family: var(--font-title);

    font-size: clamp(44px, 6.1vw, 86px);
    font-weight: 700;
    line-height: 1.08;

    letter-spacing: -4px;

    margin: 24px 0;
}

.hero h1 em {
    font-style: normal;
    color: #b28bff;
}

.lead {
    max-width: 660px;

    margin: 0 auto;

    color: #bdb5ca;

    font-size: 17px;
    line-height: 1.75;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin: 30px 0 74px;
}


/* ==========================================
   6. ÁREA DOS QUATRO CELULARES
========================================== */

.phones {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    gap: clamp(12px, 2.4vw, 34px);

    max-width: 1250px;

    margin: 0 auto;
}

.phone-wrap {
    display: block;

    flex: 1;
    min-width: 0;
    max-width: 256px;

    transition: transform 0.3s;
}

.phone-wrap:hover {
    transform: translateY(-15px);
}

.phone-wrap.p2,
.phone-wrap.p4 {
    margin-top: 42px;
}

.phone {
    position: relative;

    height: 445px;

    padding: 6px;

    background: #15121d;

    border: 5px solid #34303b;
    border-radius: 36px;

    box-shadow:
            0 30px 60px #0008,
            0 0 0 1px #9c84b333;

    overflow: hidden;
}

.notch {
    position: absolute;
    z-index: 3;

    left: 50%;
    top: 7px;

    transform: translateX(-50%);

    width: 28%;
    height: 14px;

    background: #16141a;

    border-radius: 0 0 12px 12px;
}

.screen {
    height: 100%;

    padding: 30px 15px 15px;

    border-radius: 27px;

    overflow: hidden;

    text-align: left;
    font-size: 11px;
}

.screen .tiny {
    display: flex;
    justify-content: space-between;

    margin-bottom: 22px;

    font-size: 15px;
}

.phone-label {
    display: flex;
    justify-content: space-between;

    margin-top: 20px;

    color: #9c8bb2;

    font-size: 10px;
    letter-spacing: 1.4px;

    text-align: left;
}

.phone-label b {
    color: #d6c2ff;

    font-size: 10px;
    letter-spacing: 0;
}

.demo-hint {
    margin-top: 44px;

    color: #857c99;
    font-size: 12px;
}


/* ==========================================
   7. MODELO BURGER
========================================== */

.burger {
    background: #242225;
    color: white;
}

.burger .tiny,
.burger .s-greeting b {
    color: #ffb900;
}

.s-greeting {
    margin-bottom: 16px;

    font-size: 18px;
    line-height: 1.25;
}

.s-search {
    padding: 11px;

    margin-bottom: 16px;

    background: #363238;
    color: #bcb8c1;

    border-radius: 8px;
}

.s-tags {
    display: flex;
    gap: 18px;

    margin-bottom: 12px;

    color: #d8d3da;
}

.s-tags span:first-child {
    color: #ffb900;
}

.s-card {
    display: inline-flex;
    flex-direction: column;

    vertical-align: top;

    width: 48%;
    min-height: 135px;

    padding: 8px;
    margin-bottom: 8px;

    background: #343136;

    border-radius: 11px;

    overflow: hidden;
}

.s-card .food {
    width: 100%;
    height: 70px;

    margin-bottom: 7px;

    overflow: hidden;

    border-radius: 7px;

    background: #272329;
}

.s-card .food img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.s-card b {
    font-size: 10px;
}

.s-card small {
    margin-top: 3px;

    color: #bbb;

    font-size: 8px;
}

.s-card strong {
    margin-top: auto;
    padding-top: 7px;

    color: #ffb900;

    font-size: 10px;
}


/* ==========================================
   8. MODELO PIZZA
========================================== */

.pizza {
    background: #faf7f6;
    color: #ba1e1e;
}

.pizza .tiny {
    font-size: 10px;
}

.pizza h3 {
    margin: 6px 0 15px;

    font-size: 19px;
}

.pizza .s-search {
    background: white;

    color: #888;

    border: 1px solid #eee;
}

.pizza-circle {
    display: grid;
    place-items: center;

    height: 115px;

    background: #ec271f;

    border-radius: 18px;

    overflow: hidden;
}

.pizza-circle img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.pizza-circle.smaller {
    height: 80px;
}

.pizza-card {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 7px;

    padding: 12px;
    margin: -12px 10px 14px;

    background: white;
    color: #333;

    border-radius: 12px;

    box-shadow: 0 5px 20px #ddd;
}

.pizza-card small {
    color: #888;

    font-size: 9px;
}

.pizza-card strong {
    color: #e12824;
}


/* ==========================================
   9. MODELO CAFÉ
========================================== */

.cafe {
    padding: 0;

    background: #f5eee3;
    color: #34231d;
}

.cafe-head {
    padding: 38px 17px 23px;

    background: #3a251d;
    color: #f8f0e4;

    font-size: 10px;
    letter-spacing: 1px;
}

.cafe-head span {
    float: right;
}

.cafe-head h3 {
    margin: 16px 0 0;

    font-size: 28px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.cafe-body {
    padding: 18px;
}

.cafe-body > b {
    display: block;

    margin-bottom: 12px;
}

.cafe-tile {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;

    vertical-align: top;

    width: 47%;
    height: 146px;

    padding: 10px;

    background: #412c23;
    color: white;

    border-radius: 16px;

    text-align: center;

    overflow: hidden;
}

.cafe-tile.light {
    background: #e4d5bf;
    color: #3b2c22;
}

.cafe-tile img {
    display: block;

    width: 100%;
    height: 75px;

    margin-bottom: 6px;

    object-fit: cover;

    border-radius: 8px;
}

.cafe-tile small {
    font-size: 10px;
}

.cafe-tile strong {
    margin-top: 5px;

    font-size: 10px;
}

.cafe-body p {
    margin-top: 25px;

    color: #7c6b5d;

    line-height: 1.5;
}

.cafe-nav {
    margin-top: 32px;

    padding: 14px 0;

    background: #e5d6bf;

    border-radius: 12px;

    text-align: center;
}


/* ==========================================
   10. MODELO ELEGANCE
========================================== */

.elegance {
    padding: 31px 13px 13px;

    background: #f2f0e9;
    color: #292522;
}

.e-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 14px;
}

.e-head span {
    letter-spacing: 4px;
}

.e-sub {
    margin: 20px 0 10px;

    text-align: center;

    letter-spacing: 2px;
    font-size: 7px;
}

.e-photo {
    display: grid;
    place-items: center;

    height: 140px;

    background: #e6d9c5;

    overflow: hidden;
}

.e-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.e-title {
    margin: 15px 0;

    font-family: Georgia, serif;

    font-size: 29px;
    line-height: 1.05;
}

.e-title i {
    font-weight: 400;
}

.e-caption {
    font-size: 8px;
    letter-spacing: 1px;
}

.e-line {
    margin: 17px 0;

    border-bottom: 1px solid #9c958a;
}

.e-product {
    display: flex;
    justify-content: space-between;

    font-size: 9px;
}

.e-photo.mini {
    height: 80px;

    margin-top: 15px;
}


/* ==========================================
   11. CONFIGURAÇÕES DAS SEÇÕES
========================================== */

.section {
    padding: 110px max(7vw, 24px);
}

.section h2 {
    margin: 20px 0;

    font-family: var(--font-title);

    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 700;
    line-height: 1.12;

    letter-spacing: -2px;
}

.section h2 span {
    color: #ae85ff;
}

.section-desc {
    max-width: 510px;

    color: #aaa1bb;

    line-height: 1.7;
}


/* ==========================================
   12. RECURSOS E FUNCIONALIDADES
========================================== */

.features {
    background: #110d1b;
}

.feature-grid {
    display: grid;

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

    gap: 18px;

    margin-top: 48px;
}

.feature-grid article {
    min-height: 205px;

    padding: 28px;

    background: #1b1429;

    border: 1px solid #352743;
    border-radius: 17px;

    transition:
            transform 0.25s,
            border-color 0.25s;
}

.feature-grid article:hover {
    transform: translateY(-5px);

    border-color: #8055b3;
}

.feature-icon {
    color: #b38aff;

    font-size: 26px;
}

.feature-grid h3 {
    margin: 16px 0 8px;
}

.feature-grid p,
.step-grid p {
    color: #a79fb5;

    font-size: 14px;
    line-height: 1.7;
}


/* ==========================================
   13. MENSALIDADE FIXA
========================================== */

#mensalidade {
    position: relative;

    background: linear-gradient(
            180deg,
            #0e0a18,
            #170e29
    );
}

#mensalidade .section-desc {
    max-width: 650px;
}

#mensalidade .feature-grid article {
    background: #20152f;

    border-color: #46305c;
}

#mensalidade .feature-icon {
    color: #c6a9ff;
}

#mensalidade .hero-actions {
    justify-content: flex-start;

    margin: 35px 0 0;
}


/* ==========================================
   14. COMO FUNCIONA
========================================== */

.steps {
    background: #0c0914;
}

.step-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 46px;
}

.step-grid article {
    padding-top: 20px;

    border-top: 1px solid #6b4a9c;
}

.step-grid article > div {
    color: #9567e9;

    font-size: 37px;
    font-weight: 800;
}


/* ==========================================
   15. CHAMADA PARA ORÇAMENTO
========================================== */

.cta {
    text-align: center;

    background: radial-gradient(
            ellipse at 50% 50%,
            #3b1b68,
            #160d27 65%,
            #0e0a17
    );
}

.cta p {
    max-width: 500px;

    margin: 0 auto 28px;

    color: #c3b5d5;

    line-height: 1.7;
}

.cta small {
    display: block;

    margin-top: 23px;

    color: #a69bb7;
}


/* ==========================================
   16. RODAPÉ
========================================== */

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 28px max(7vw, 24px);

    color: #a79db9;

    border-top: 1px solid #33233d;

    font-size: 12px;
}

footer .brand {
    font-size: 13px;
}


/* ==========================================
   17. RESPONSIVIDADE - TABLETS
========================================== */

@media (max-width: 900px) {

    .topbar nav {
        display: none;
    }

    .phones {
        flex-wrap: wrap;
        gap: 22px;
    }

    .phone-wrap {
        flex: 0 0 44%;
        max-width: 250px;
    }

    .phone-wrap.p2,
    .phone-wrap.p4 {
        margin-top: 0;
    }

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

}


/* ==========================================
   18. RESPONSIVIDADE - CELULARES
========================================== */

@media (max-width: 580px) {

    /* Cabeçalho */

    .topbar {
        height: 70px;
        padding: 0 15px;
    }

    .topbar > .btn {
        padding: 11px;
        font-size: 11px;
    }

    .brand {
        font-size: 13px;
    }

    .mark {
        font-size: 25px;
    }

    /* Apresentação */

    .hero {
        padding-top: 70px;
    }

    .hero h1 {
        letter-spacing: -2px;
    }

    .lead {
        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: center;

        margin-bottom: 40px;
    }

    /* Celulares */

    .phone-wrap {
        flex: 0 0 46%;
    }

    .phone {
        height: 315px;

        padding: 3px;

        border-radius: 25px;
    }

    .screen {
        padding: 23px 8px 8px;

        border-radius: 20px;
    }

    .screen .tiny {
        margin-bottom: 12px;
    }

    /* Burger */

    .s-card {
        width: 100%;
        min-height: 95px;
    }

    .s-card:nth-of-type(2) {
        display: none;
    }

    .s-card .food {
        height: 45px;
    }

    .s-greeting {
        font-size: 13px;
    }

    .s-search {
        padding: 7px;
        font-size: 8px;
    }

    .s-tags {
        gap: 8px;
        font-size: 8px;
    }

    /* Pizza */

    .pizza h3 {
        font-size: 13px;
    }

    .pizza-circle {
        height: 70px;
    }

    .pizza-circle.smaller {
        height: 45px;
    }

    .pizza-card {
        padding: 8px;
    }

    /* Café */

    .cafe-head {
        padding: 28px 9px 15px;
    }

    .cafe-head h3 {
        font-size: 19px;
    }

    .cafe-body {
        padding: 10px;
    }

    .cafe-tile {
        height: 95px;
        padding: 5px;
    }

    .cafe-tile img {
        height: 42px;
        margin-bottom: 3px;
    }

    .cafe-tile small,
    .cafe-tile strong {
        font-size: 8px;
    }

    .cafe-nav {
        margin-top: 14px;
        padding: 10px 0;
    }

    /* Elegance */

    .e-photo {
        height: 92px;
    }

    .e-title {
        font-size: 21px;
    }

    .e-photo.mini {
        height: 48px;
    }

    /* Legendas */

    .phone-label {
        font-size: 8px;
        letter-spacing: 0;
    }

    .phone-label b {
        font-size: 8px;
    }

    /* Seções */

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

    .section {
        padding: 70px 24px;
    }

    #mensalidade .hero-actions {
        align-items: flex-start;
    }

    /* Rodapé */

    footer {
        flex-wrap: wrap;
    }

}


/* ==========================================
   19. TELAS MUITO PEQUENAS
========================================== */

@media (max-width: 360px) {

    .phones {
        gap: 12px;
    }

    .phone-wrap {
        flex-basis: 47%;
    }

    .phone {
        height: 290px;
    }

    .phone-label {
        flex-wrap: wrap;
        gap: 4px;
    }

    .topbar > .btn {
        padding: 9px 7px;
        font-size: 10px;
    }

}


/* ==========================================
   20. FOTOS E MOCKUPS - LAYOUT DEFINITIVO
========================================== */
.phone-wrap { min-width: 0; }
.phone { isolation: isolate; }
.phone .screen { position: relative; width: 100%; }
.phone .screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.burger .s-card { width: calc(50% - 4px); min-height: 150px; padding: 7px; }
.burger .s-card .food { width: 100%; height: 76px; overflow: hidden; border-radius: 8px; margin-bottom: 8px; }
.burger .s-card .food img { object-position: center; }
.burger .s-card b { font-size: 10px; line-height: 1.2; }
.burger .s-card small { font-size: 8px; line-height: 1.25; }
.pizza .pizza-circle { height: 112px; overflow: hidden; border-radius: 14px; }
.pizza .pizza-circle.smaller { height: 70px; }
.pizza .pizza-card { z-index: 1; margin: -10px 10px 12px; padding: 10px; }
.cafe .cafe-tile { justify-content: flex-start; height: 158px; padding: 8px; }
.cafe .cafe-tile img { height: 88px; flex-shrink: 0; border-radius: 9px; margin-bottom: 8px; }
.cafe .cafe-tile small, .cafe .cafe-tile strong { font-size: 10px; }
.elegance .e-photo { height: 135px; overflow: hidden; border-radius: 3px; }
.elegance .e-photo.mini { height: 64px; margin-top: 12px; }
.elegance .e-title { position: relative; margin: 12px 0; font-size: 26px; line-height: 1.05; }
.elegance .e-caption { position: relative; line-height: 1.5; }
.elegance .e-line { margin: 12px 0; }
@media (max-width: 700px) {
  .hero { padding: 56px 0 60px; overflow: hidden; }
  .hero > .eyebrow, .hero > h1, .hero > .lead, .hero > .hero-actions, .demo-hint { margin-left: 20px; margin-right: 20px; }
  .hero h1 { font-size: clamp(37px, 9vw, 58px); letter-spacing: -1.7px; }
  .hero-actions { margin-bottom: 34px; }
  /* Carrossel horizontal: cada celular mantém proporção e legibilidade */
  .phones { width: 100%; max-width: none; display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; overflow-x: auto; overflow-y: hidden; gap: 16px; padding: 8px max(20px, calc((100vw - 260px)/2)) 28px; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .phone-wrap, .phone-wrap.p2, .phone-wrap.p4 { flex: 0 0 244px; width: 244px; max-width: none; margin-top: 0; scroll-snap-align: center; }
  .phone { height: 440px; padding: 6px; border-radius: 35px; }
  .screen { padding: 30px 13px 13px; border-radius: 26px; }
  .screen .tiny { margin-bottom: 20px; }
  .s-greeting { font-size: 18px; }
  .s-search { padding: 10px; font-size: 10px; }
  .s-tags { font-size: 10px; gap: 15px; }
  .burger .s-card { width: calc(50% - 4px); min-height: 150px; }
  .burger .s-card:nth-of-type(2) { display: inline-flex; }
  .burger .s-card .food { height: 76px; }
  .pizza h3 { font-size: 19px; }
  .pizza .pizza-circle { height: 112px; }
  .pizza .pizza-circle.smaller { height: 70px; }
  .pizza .pizza-card { padding: 10px; }
  .cafe-head { padding: 38px 16px 23px; }
  .cafe-head h3 { font-size: 27px; }
  .cafe-body { padding: 17px; }
  .cafe .cafe-tile { height: 155px; padding: 8px; }
  .cafe .cafe-tile img { height: 86px; }
  .cafe .cafe-tile small, .cafe .cafe-tile strong { font-size: 10px; }
  .elegance .e-photo { height: 135px; }
  .elegance .e-title { font-size: 27px; }
  .elegance .e-photo.mini { height: 64px; }
  .phone-label, .phone-label b { font-size: 10px; }
  .demo-hint { margin-top: 10px; line-height: 1.6; }
}
@media (max-width: 370px) {
  .phone-wrap, .phone-wrap.p2, .phone-wrap.p4 { flex-basis: 226px; width: 226px; }
  .phone { height: 420px; }
  .phones { padding-left: max(16px, calc((100vw - 226px)/2)); padding-right: max(16px, calc((100vw - 226px)/2)); }
}