:root {
    --bg: #050505;
    --bg-soft: #0d0d0d;
    --panel: rgba(14, 14, 14, 0.96);
    --panel-2: rgba(18, 18, 18, 0.98);
    --border: rgba(255,255,255,0.08);
    --gold: #d7b15b;
    --gold-2: #f0cf80;
    --text: #ffffff;
    --muted: #9c9c9c;
    --muted-2: #6f6f6f;
    --red: #d61f33;
    --shadow: 0 30px 80px rgba(0,0,0,.45);
    --radius: 30px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at top left, rgba(214,31,51,.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(215,177,91,.08), transparent 24%),
        linear-gradient(180deg, #080808 0%, #030303 100%);
}

.onb-shell {
    min-height: 100vh;
    padding:
        max(18px, env(safe-area-inset-top))
        18px
        max(18px, env(safe-area-inset-bottom));
}

.onb-wrap {
    max-width: 1420px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 18px;
}

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

.hero-panel {
    min-height: calc(100vh - 36px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 34px 34px 28px;
    background:
        linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.62)),
        radial-gradient(circle at 70% 15%, rgba(215,177,91,.10), transparent 18%),
        linear-gradient(135deg, #0f0f0f 0%, #090909 40%, #121212 100%);
}

.hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.brand-box {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-box img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    border-radius: 20px;
    background: rgba(255,255,255,.02);
    padding: 4px;
}

.brand-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.02;
}

.brand-sub {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
}

.hero-tag {
    color: #ddd;
    font-size: 14px;
    text-align: right;
    line-height: 1.4;
}

.hero-content {
    max-width: 560px;
    padding-top: 8px;
}

.hero-content h1 {
    margin: 0 0 16px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(42px, 4.8vw, 74px);
    line-height: .96;
    font-weight: 700;
}

.hero-content h1 .gold {
    color: var(--gold-2);
}

.hero-content p {
    margin: 0 0 28px;
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.45;
    color: #d8d8d8;
    max-width: 520px;
}

.feature-list {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.feature-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

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

    border-radius: 50%;
    border: 1px solid rgba(215,177,91,.35);
    color: var(--gold-2);
    font-size: 22px;
}

.feature-text strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    color: #fff;
}

.feature-text span {
    color: #b0b0b0;
    font-size: 14px;
    line-height: 1.45;
}

.hero-bottom {
    padding-top: 22px;
}

.hero-phrase {
    margin: 0 0 18px;
    color: var(--gold-2);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-style: italic;
    line-height: 1.5;
}

.hero-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.hero-dots span {
    width: 28px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.20);
}

.hero-dots span.active {
    background: var(--gold-2);
}

.hero-button {
    width: 100%;
    min-height: 64px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #f0cf80, #caa14c);
    color: #101010;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 15px 40px rgba(215,177,91,.18);
}

.hero-note {
    margin-top: 14px;
    text-align: center;
    color: #a9a9a9;
    font-size: 14px;
}

.form-panel {
    min-height: calc(100vh - 36px);
    padding: 34px 34px 28px;
    background:
        linear-gradient(180deg, rgba(13,13,13,.96), rgba(9,9,9,.99));
}

.form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 30px;
}

.form-brand {
    text-align: center;
    flex: 1;
}

.form-brand img {
    width: 92px;
    height: 92px;
    object-fit: contain;
}

.form-brand-name {
    margin-top: 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    letter-spacing: 1px;
}

.form-secure {
    max-width: 215px;
    color: #d5d5d5;
    font-size: 14px;
    line-height: 1.5;
}

.form-secure strong {
    color: var(--gold-2);
}

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.step-item {
    text-align: center;
}

.step-circle {
    width: 42px;
    height: 42px;
    margin: 0 auto 8px;

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

    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.20);
    color: #9d9d9d;
    font-weight: 700;
    font-size: 18px;
}

.step-item.active .step-circle {
    border-color: transparent;
    background: linear-gradient(135deg, #f2d485, #c89c46);
    color: #111;
}

.step-label {
    color: #9e9e9e;
    font-size: 13px;
}

.step-item.active .step-label {
    color: var(--gold-2);
    font-weight: 700;
}

.form-copy h2 {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 4.2vw, 60px);
    line-height: 1.02;
}

.form-copy p {
    margin: 0 0 28px;
    color: #cbcbcb;
    font-size: 17px;
    line-height: 1.55;
    max-width: 540px;
}

.setup-form {
    display: grid;
    gap: 18px;
}

.field {
    display: block;
}

.field span {
    display: block;
    margin-bottom: 8px;
    color: #f3f3f3;
    font-size: 14px;
    font-weight: 700;
}

.input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 66px;
    padding: 0 18px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;

    background: rgba(255,255,255,.02);
}

.input-icon {
    color: #c2c2c2;
    font-size: 22px;
    width: 28px;
    text-align: center;
    flex: 0 0 28px;
}

.input-wrap input {
    width: 100%;
    height: 64px;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
}

.input-wrap input::placeholder {
    color: #757575;
}

.next-button {
    margin-top: 14px;
    width: 100%;
    min-height: 70px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #f0cf80, #caa14c);
    color: #101010;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.support-note {
    margin-top: 18px;
    color: #9b9b9b;
    font-size: 14px;
    line-height: 1.5;
}

.support-note strong {
    color: #d7d7d7;
}

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

    .hero-panel,
    .form-panel {
        min-height: auto;
    }

    .hero-content h1 {
        font-size: 56px;
    }

    .form-copy h2 {
        font-size: 44px;
    }
}

@media (max-width: 640px) {
    .onb-shell {
        padding:
            max(12px, env(safe-area-inset-top))
            12px
            max(12px, env(safe-area-inset-bottom));
    }

    .hero-panel,
    .form-panel {
        padding: 22px 18px 20px;
        border-radius: 24px;
    }

    .brand-box img,
    .form-brand img {
        width: 68px;
        height: 68px;
    }

    .brand-title {
        font-size: 18px;
    }

    .brand-sub,
    .hero-tag {
        font-size: 12px;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .feature-text strong {
        font-size: 14px;
    }

    .feature-text span {
        font-size: 13px;
    }

    .form-head {
        display: block;
        margin-bottom: 24px;
    }

    .form-brand {
        text-align: left;
        margin-bottom: 16px;
    }

    .form-secure {
        max-width: none;
        font-size: 13px;
    }

    .steps {
        gap: 6px;
    }

    .step-label {
        font-size: 11px;
    }

    .form-copy h2 {
        font-size: 34px;
    }

    .form-copy p {
        font-size: 15px;
        margin-bottom: 22px;
    }

    .input-wrap {
        min-height: 58px;
        border-radius: 16px;
    }

    .input-wrap input {
        height: 56px;
        font-size: 16px;
    }

    .next-button,
    .hero-button {
        min-height: 58px;
        font-size: 16px;
    }

    .hero-note,
    .support-note {
        font-size: 12px;
    }
}

/* ===== FUNDO PREMIUM PRIMEIRO ACESSO ===== */

body {
    background:
        linear-gradient(rgba(5,5,5,.72), rgba(5,5,5,.72)),
        url('/assets/images/onboarding-bg.jpg') center center / cover no-repeat fixed !important;
}

.hero-panel {
    background:
        linear-gradient(
            90deg,
            rgba(6,6,6,.88) 0%,
            rgba(6,6,6,.66) 42%,
            rgba(6,6,6,.36) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.20),
            rgba(0,0,0,.48)
        ),
        url('/assets/images/onboarding-bg.jpg') center center / cover no-repeat !important;
}

.form-panel {
    background:
        linear-gradient(
            180deg,
            rgba(10,10,10,.96),
            rgba(8,8,8,.97)
        ) !important;

    backdrop-filter: blur(2px);
}

.hero-panel,
.form-panel {
    min-height: calc(100vh - 36px);
}

@media (max-width: 1100px) {
    .hero-panel {
        min-height: 620px;
        background-position: center center !important;
    }

    .form-panel {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    body {
        background:
            linear-gradient(rgba(5,5,5,.78), rgba(5,5,5,.78)),
            url('/assets/images/onboarding-bg.jpg') center center / cover no-repeat fixed !important;
    }

    .hero-panel {
        min-height: 540px;
        background:
            linear-gradient(
                180deg,
                rgba(5,5,5,.68) 0%,
                rgba(5,5,5,.52) 44%,
                rgba(5,5,5,.72) 100%
            ),
            url('/assets/images/onboarding-bg.jpg') center center / cover no-repeat !important;
    }
}


/* ===== FLUXO PRIMEIRO ACESSO ===== */

.form-step {
    display: none;
}

.form-step.active {
    display: block;
}

.step-actions {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.back-button {
    width: 100%;
    min-height: 54px;

    border-radius: 16px;
    border: 1px solid #333;

    background: #121212;
    color: #aaa;

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

    cursor: pointer;
}

.logo-upload-box {
    margin-top: 18px;
    padding: 22px;

    text-align: center;

    border: 1px solid #292929;
    border-radius: 18px;

    background: #0b0b0b;
}

.logo-upload-box img {
    width: 150px;
    height: 150px;

    object-fit: contain;

    margin-bottom: 18px;
}

.logo-upload-box input {
    width: 100%;
    color: #aaa;
}

.summary-box {
    margin-top: 22px;

    border: 1px solid #282828;
    border-radius: 18px;

    overflow: hidden;

    background: #0c0c0c;
}

.summary-row {
    padding: 15px 16px;

    border-bottom: 1px solid #202020;
}

.summary-row:last-child {
    border-bottom: 0;
}

.summary-row small {
    display: block;

    margin-bottom: 5px;

    color: #777;
    font-size: 11px;
}

.summary-row strong {
    color: #fff;
    font-size: 15px;
}


/* MOBILE - prioriza o cadastro */
@media (max-width: 768px) {

    .hero-panel {
        display: none !important;
    }

    .form-panel {
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh;
        padding:
            max(18px, env(safe-area-inset-top))
            18px
            max(28px, env(safe-area-inset-bottom)) !important;

        border: 0 !important;
        border-radius: 0 !important;
    }

    .form-panel .brand-logo,
    .form-panel .logo {
        max-width: 125px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .form-copy {
        margin-bottom: 20px !important;
    }

    .form-copy h2 {
        font-size: 25px !important;
        line-height: 1.15 !important;
        margin-bottom: 8px !important;
    }

    .form-copy p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .steps {
        margin-bottom: 22px !important;
    }

    .field {
        margin-bottom: 14px !important;
    }

    .input-wrap input {
        min-height: 52px !important;
        font-size: 16px !important;
    }

    .next-button {
        min-height: 54px !important;
        width: 100% !important;
    }

}
CSScat >> /var/www/nobre-barber/public/assets/css/onboarding.css <<'CSS'

/* MOBILE - prioriza o cadastro */
@media (max-width: 768px) {

    .hero-panel {
        display: none !important;
    }

    .form-panel {
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh;
        padding:
            max(18px, env(safe-area-inset-top))
            18px
            max(28px, env(safe-area-inset-bottom)) !important;

        border: 0 !important;
        border-radius: 0 !important;
    }

    .form-panel .brand-logo,
    .form-panel .logo {
        max-width: 125px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .form-copy {
        margin-bottom: 20px !important;
    }

    .form-copy h2 {
        font-size: 25px !important;
        line-height: 1.15 !important;
        margin-bottom: 8px !important;
    }

    .form-copy p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .steps {
        margin-bottom: 22px !important;
    }

    .field {
        margin-bottom: 14px !important;
    }

    .input-wrap input {
        min-height: 52px !important;
        font-size: 16px !important;
    }

    .next-button {
        min-height: 54px !important;
        width: 100% !important;
    }

}

/* MOBILE FINAL - abrir direto no cadastro */
@media screen and (max-width: 900px) {

    body {
        display: block !important;
        min-height: 100vh !important;
        padding: 0 !important;
        background: #080808 !important;
    }

    .hero-panel {
        display: none !important;
        visibility: hidden !important;
    }

    .form-panel {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        margin: 0 !important;

        padding:
            max(16px, env(safe-area-inset-top))
            18px
            max(28px, env(safe-area-inset-bottom)) !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

}

/* MOBILE DEFINITIVO - apresentação primeiro, cadastro depois */
@media screen and (max-width: 900px) {

    body {
        display: block !important;
        padding: 0 !important;
        background: #080808 !important;
    }

    .hero-panel {
        display: flex !important;
        visibility: visible !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 520px !important;
        margin: 0 !important;

        border-radius: 0 !important;

        justify-content: flex-end !important;

        padding:
            36px
            22px
            32px !important;
    }

    .form-panel {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: auto !important;

        margin: 0 !important;

        padding:
            28px
            18px
            40px !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .hero-panel h1 {
        font-size: 30px !important;
        line-height: 1.08 !important;
    }

    .hero-panel p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .hero-panel img {
        max-width: 135px !important;
    }

    .hero-panel .benefits,
    .hero-panel .features {
        margin-top: 18px !important;
    }

    .form-copy h2 {
        font-size: 25px !important;
    }

}