/* ── sc-app global ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html.sc-app-html--premium {
    background-color: #200713;
    background-image:
        radial-gradient(circle at top center, rgba(184, 66, 85, 0.28), transparent 34%),
        radial-gradient(circle at bottom left, rgba(248, 194, 112, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(32, 7, 19, 0.94), rgba(32, 7, 19, 0.98)),
        url("/wp-content/uploads/2026/02/texture1.png");
    background-size: cover;
    background-position: center;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

body.sc-app {
    margin: 0;
    padding: 0;
    font-family: var(--sc-font-body);
    line-height: var(--sc-line-height-body);
    color: var(--sc-text-primary);
    background-color: var(--sc-color-primary);
    background-image: url("/wp-content/uploads/2026/02/texture1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.sc-app--premium {
    background:
        radial-gradient(circle at top center, rgba(184, 66, 85, 0.28), transparent 34%),
        radial-gradient(circle at bottom left, rgba(248, 194, 112, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(32, 7, 19, 0.94), rgba(32, 7, 19, 0.98)),
        url("/wp-content/uploads/2026/02/texture1.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.sc-main {
    min-height: 100vh;
    padding-top: var(--sc-header-height);
}

.sc-main--premium {
    padding-top: 0;
}

.sc-section {
    padding-block: var(--sc-section-padding-block);
}

.sc-section--hero,
.sc-section--premium,
.sc-section--checkout {
    padding-block: var(--sc-section-padding-block-lg);
}

/* Hero */
.sc-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: var(--sc-section-padding-block-lg) var(--sc-page-gutter);
}

.sc-hero__logo {
    width: min(72vw, 400px);
    height: auto;
}

/* Flash */
.sc-flash {
    max-width: 600px;
    margin: var(--sc-space-2) auto;
    padding: var(--sc-space-2);
    background: var(--sc-color-error);
    color: white;
    border-radius: var(--sc-radius-sm);
    text-align: center;
    font-family: var(--sc-font-display);
}

.sc-flash--premium {
    position: fixed;
    top: var(--sc-space-3);
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 2rem), 420px);
    z-index: var(--sc-z-modal);
    background: rgba(255, 76, 76, 0.92);
    backdrop-filter: blur(10px);
}

/* Reactivate page */
.sc-reactivate {
    text-align: center;
    padding: var(--sc-section-padding-block) var(--sc-page-gutter);
    color: var(--sc-text-on-dark);
}

.sc-reactivate h1 {
    font-family: var(--sc-font-display);
    color: var(--sc-text-on-dark);
}

.sc-reactivate p {
    color: var(--sc-text-on-dark-muted);
    max-width: 600px;
    margin: 0 auto var(--sc-space-4);
    line-height: var(--sc-line-height-relaxed);
}

/* Premium page */
.sc-premium {
    text-align: center;
    padding: var(--sc-section-padding-block-lg) var(--sc-page-gutter);
    color: var(--sc-text-on-dark);
}

.sc-premium h1 {
    font-family: var(--sc-font-display);
    color: var(--sc-text-on-dark);
}

.sc-premium p {
    color: var(--sc-text-on-dark-muted);
    margin-bottom: var(--sc-space-4);
    line-height: var(--sc-line-height-relaxed);
}

/* Error page */
.sc-error-page {
    text-align: center;
    padding: var(--sc-section-padding-block-lg) var(--sc-page-gutter);
    color: var(--sc-text-on-dark);
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sc-error-page h1 {
    font-family: var(--sc-font-display);
    font-size: var(--sc-font-size-3xl);
    color: var(--sc-text-on-dark);
    margin-bottom: var(--sc-space-2);
}

.sc-error-page p {
    color: var(--sc-text-on-dark-muted);
    margin-bottom: var(--sc-space-4);
    max-width: 480px;
    line-height: var(--sc-line-height-relaxed);
}

/* Checkout page */
.sc-section--checkout {
    padding-block: var(--sc-section-padding-block-lg);
}

@media (min-width: 768px) {
    .sc-hero {
        min-height: 70vh;
    }

    .sc-hero__logo {
        width: min(50vw, 400px);
    }

    .sc-reactivate,
    .sc-premium,
    .sc-error-page {
        text-align: center;
    }
}