@import url('shared/site-footer-email.css');

:root
{
    --bg-deep: #0f0f0f;
    --bg-page: #141414;
    --bg-elevated: #1a1a1a;
    --bg-card: #1e1e1e;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-mid: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text-primary: #f4f4f5;
    --text-secondary: #d4d4d8;
    --text-muted: #a1a1aa;
    --accent: #ff8c00;
    --accent-hover: #ffa033;
    --accent-muted: rgba(255, 140, 0, 0.12);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 999px;
    --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.55);
    --font: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html
{
    scroll-behavior: smooth;
    color-scheme: dark;
}

body
{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    background-color: var(--bg-page);
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -30%, rgba(255, 140, 0, 0.09), transparent 55%),
        radial-gradient(ellipse 70% 50% at 100% 20%, rgba(255, 140, 0, 0.04), transparent 50%);
    color: var(--text-primary);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

input:focus-visible,
button:focus-visible,
textarea:focus-visible,
a:focus-visible
{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

input:focus:not(:focus-visible),
button:focus:not(:focus-visible),
textarea:focus:not(:focus-visible)
{
    outline: none;
}

/* Site header */
header.site-header
{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
    min-height: 4rem;
    width: 100%;
    background: rgba(15, 15, 15, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-subtle);
    box-sizing: border-box;
}

.site-header-logo-link
{
    text-decoration: none;
    color: inherit;
}

.site-header-logo
{
    color: var(--text-primary);
    font-family: var(--font);
    font-size: clamp(1.35rem, 3.5vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-header-logo-ai
{
    color: var(--accent);
}

.site-header-nav
{
    display: flex;
    align-items: center;
    gap: 0.35rem 1.25rem;
    flex-wrap: wrap;
}

.site-header-link
{
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: clamp(0.72rem, 1.5vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.45rem 0.2rem;
    transition: color 0.2s ease;
}

.site-header-link:hover
{
    color: var(--text-primary);
}

.mainContent
{
    display: flex;
    flex-direction: column;
    width: 100%;
    background: transparent;
}
/* Site footer */
.site-footer
{
    background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-deep) 45%);
    border-top: 1px solid var(--border-subtle);
    padding: clamp(3rem, 8vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem) 2.5rem;
    margin-top: 0;
    width: 100%;
    box-sizing: border-box;
}
.footer-inner
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 3rem;
    row-gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}
.footer-col
{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.footer-col-brand
{
    max-width: 240px;
}
.footer-logo
{
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem;
}
.footer-logo-ai
{
    color: var(--accent);
}
.footer-tagline
{
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    line-height: 1.45;
    margin: 0 0 1.5rem;
}
.footer-section-title
{
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
}
.footer-section-title--spaced
{
    margin-top: 1.25rem;
}
.footer-link
{
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-link:hover
{
    color: var(--text-primary);
}
.footer-link-button
{
    display: inline;
    align-self: flex-start;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s;
}
.footer-link-button:hover
{
    color: var(--accent);
}

/* Generate workout popup (index page) */
.generate-workout-overlay
{
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.72);
    box-sizing: border-box;
}
.generate-workout-overlay[hidden]
{
    display: none !important;
}
.generate-workout-dialog
{
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: min(90vh, 720px);
    overflow: auto;
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.generate-workout-close
{
    position: absolute;
    top: 0.65rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    background: transparent;
    color: #aaa;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
}
.generate-workout-close:hover
{
    color: #fff;
    background: #333;
}
.generate-workout-title
{
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 2rem 0.75rem 0;
}
.generate-workout-prompt-label
{
    margin: 0 0 0.25rem;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.generate-workout-prompt
{
    margin: 0 0 1rem;
    font-family: var(--font);
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-secondary);
    padding: 0.65rem 0.75rem;
    background: rgba(0, 0, 0, 0.35);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}
.generate-workout-loading
{
    margin: 0;
    font-family: var(--font);
    font-size: 0.95rem;
    color: var(--accent);
    animation: generate-pulse 1.2s ease-in-out infinite;
}
@keyframes generate-pulse
{
    50% { opacity: 0.65; }
}
.generate-workout-result
{
    margin-bottom: 1.25rem;
    font-family: var(--font);
}
.generate-workout-note
{
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.generate-workout-pre
{
    margin: 0;
    padding: 1rem 1.1rem;
    font-family: var(--font);
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}
.generate-workout-actions
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}
.generate-workout-full-link
{
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.generate-workout-full-link:hover
{
    text-decoration: underline;
}

.footer-text
{
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 0.85rem;
}
.footer-placeholder
{
    color: #fff;
}
.footer-socials
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 0.25rem;
}
.footer-socials .footer-link
{
    color: var(--text-muted);
}
@media (max-width: 900px)
{
    .footer-inner
    {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}
@media (max-width: 500px)
{
    .footer-inner
    {
        grid-template-columns: 1fr;
    }
}



/* Hero — full-viewport background + left-aligned column (reference-style layout) */
.hero-viewport.page1
{
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    margin-top: 0;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    padding: calc(4rem + clamp(1.25rem, 4vh, 2.5rem)) clamp(1.25rem, 5vw, 3.5rem) clamp(2rem, 5vh, 3rem);
    box-sizing: border-box;
    overflow: hidden;
}

.hero-backdrop
{
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        url("../assets/index/background-hero.png") center center / cover no-repeat;
}

.hero-scrim
{
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            105deg,
            rgba(15, 15, 15, 0.94) 0%,
            rgba(15, 15, 15, 0.82) 38%,
            rgba(15, 15, 15, 0.45) 62%,
            rgba(15, 15, 15, 0.22) 100%
        ),
        radial-gradient(ellipse 90% 70% at 0% 50%, rgba(255, 140, 0, 0.07), transparent 55%);
}

.hero-inner
{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 34rem;
    margin-right: auto;
    text-align: left;
}

.hero-eyebrow
{
    margin: 0 0 1rem;
    font-family: var(--font);
    font-size: clamp(0.72rem, 1.5vw, 0.82rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.4;
}

.hero-headline
{
    margin: 0 0 1.1rem;
    font-family: var(--font);
    font-size: clamp(2.15rem, 6.5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--text-primary);
}

.hero-headline-break
{
    display: inline-block;
}

.slogan-accent
{
    color: var(--accent);
}

.hero-subtitle
{
    margin: 0 0 1.75rem;
    max-width: 32rem;
    font-family: var(--font);
    font-size: clamp(0.98rem, 2vw, 1.12rem);
    font-weight: 400;
    line-height: 1.58;
    color: var(--text-secondary);
}

.hero-login.loginContainer
{
    max-width: 100%;
    margin-top: 0;
}

.hero-footnote
{
    margin: 1.25rem 0 0;
    font-family: var(--font);
    font-size: clamp(0.75rem, 1.5vw, 0.82rem);
    line-height: 1.45;
    color: var(--text-muted);
}

.hero-footnote-link
{
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.hero-footnote-link:hover
{
    color: var(--accent-hover);
    border-bottom-color: var(--accent-hover);
}

.hero-viewport .loginContainer
{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.9rem;
    padding: clamp(1.35rem, 3.5vw, 1.75rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
    background: linear-gradient(
        165deg,
        rgba(22, 22, 22, 0.92) 0%,
        rgba(12, 12, 12, 0.94) 100%
    );
    box-shadow: var(--shadow-soft), 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-viewport .emailButton
{
    border-radius: var(--radius-full);
    padding: 0.95rem 1.25rem;
}
.googleButton
{
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    font-family: var(--font);
    font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.googleButton:hover
{
    background: var(--bg-elevated);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.orSeparator
{
    color: var(--text-muted);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    margin: 0.15rem 0;
    font-family: var(--font);
    width: 100%;
    position: relative;
}
.orSeparator::before,
.orSeparator::after
{
    content: "";
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-mid), transparent);
}
.orSeparator::before
{
    left: 0;
}
.orSeparator::after
{
    right: 0;
}
.emailInput
{
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: var(--font);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.emailInput:hover
{
    border-color: var(--border-strong);
}
.emailInput::placeholder
{
    color: var(--text-muted);
}
.emailInput:-webkit-autofill,
.emailInput:-webkit-autofill:hover,
.emailInput:-webkit-autofill:focus
{
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
    transition: background-color 99999s ease-out 0s;
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.45) inset !important;
}
.index-login-password
{
    margin-top: 0;
}
.index-login-error
{
    width: 100%;
    color: #f87171;
    font-family: var(--font);
    font-size: 0.85rem;
    text-align: center;
    margin: 0;
    line-height: 1.35;
}
.emailButton
{
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    color: #0a0a0a;
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--font);
    transition: background-color 0.2s, transform 0.15s;
}
.emailButton:hover
{
    background: var(--accent-hover);
}
.emailButton:active
{
    transform: scale(0.98);
}

@media (max-width: 900px)
{
    .hero-viewport.page1
    {
        align-items: center;
        padding-top: max(calc(3.75rem + clamp(1.5rem, 6vh, 2.5rem)), env(safe-area-inset-top, 0px));
        padding-left: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-left, 0px));
        padding-right: max(clamp(1.1rem, 4vw, 1.5rem), env(safe-area-inset-right, 0px));
        padding-bottom: max(clamp(2rem, 5vh, 3rem), env(safe-area-inset-bottom, 0px));
        min-height: 100svh;
    }

    .hero-scrim
    {
        background:
            linear-gradient(
                180deg,
                rgba(15, 15, 15, 0.88) 0%,
                rgba(15, 15, 15, 0.78) 45%,
                rgba(15, 15, 15, 0.5) 100%
            ),
            radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255, 140, 0, 0.08), transparent 50%);
    }

    .hero-inner
    {
        max-width: min(100%, 28rem);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .hero-subtitle
    {
        margin-left: auto;
        margin-right: auto;
    }

    .page2-tab-content:not(.page2-tab-content--generate)
    {
        flex-direction: column;
    }

    .page2-box-image
    {
        flex: 0 0 auto;
        width: 100%;
        min-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .page2-box-text
    {
        padding: clamp(1.25rem, 4vw, 1.75rem);
    }

    header.site-header
    {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
        padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
        padding-bottom: 0.75rem;
    }

    .site-header-nav
    {
        width: 100%;
        gap: 0.5rem 0.85rem;
    }
}

/* Features section */
.page2
{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    min-height: 0;
    width: 100%;
    padding: clamp(3rem, 10vw, 5rem) clamp(1.25rem, 4vw, 2rem) clamp(2rem, 6vw, 4rem);
}
.page2-header
{
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 2.75rem);
    max-width: 36rem;
}
.page2-title
{
    color: var(--text-primary);
    font-family: var(--font);
    font-size: clamp(1.65rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-transform: none;
    margin: 0 0 0.85rem;
    line-height: 1.15;
}
.page2-subtitle
{
    color: var(--text-muted);
    font-family: var(--font);
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.65;
    margin: 0;
    font-weight: 400;
}
.page2-nav
{
    display: flex;
    justify-content: center;
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    width: 100%;
}
.page2-nav-inner
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    padding: 0.35rem;
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.page2-nav-slider
{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.22) 0%, rgba(255, 140, 0, 0.08) 100%);
    border: 1px solid rgba(255, 140, 0, 0.25);
    border-radius: var(--radius-full);
    transition: left 0.3s ease, width 0.3s ease;
    z-index: 0;
    pointer-events: none;
}
.page2-nav-btn
{
    position: relative;
    z-index: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: clamp(0.78rem, 2vw, 0.9rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-full);
    transition: color 0.2s ease;
}
.page2-nav-btn:hover
{
    color: var(--text-secondary);
}
.page2-nav-btn.active
{
    color: var(--text-primary);
}
.page2-content-box
{
    position: relative;
    width: 100%;
    max-width: 920px;
    min-height: 300px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(155deg, rgba(28, 28, 28, 0.9) 0%, rgba(18, 18, 18, 0.95) 100%);
    box-shadow: var(--shadow-soft);
}
.page2-tab-content
{
    display: none;
    flex-direction: row;
    align-items: stretch;
    min-height: 320px;
    width: 100%;
}
.page2-tab-content.active
{
    display: flex;
}
.page2-tab-content--generate
{
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    min-height: 340px;
}
.page2-generate-solo
{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
    box-sizing: border-box;
}
.page2-generate-solo-inner
{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}
.page2-generate-solo-heading
{
    align-self: flex-start;
}
.page2-generate-lead
{
    margin-bottom: 1.35rem;
}
.page2-generate-strong
{
    color: var(--accent);
    font-weight: 600;
}
.page2-generate-ready
{
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-mid);
    background: rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: stretch;
}
.page2-generate-ready-text
{
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.page2-generate-open-modal-btn
{
    align-self: flex-start;
    padding: 0.65rem 1.15rem;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: var(--font);
    color: #0a0a0a;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
}
.page2-generate-open-modal-btn:hover
{
    background: var(--accent-hover);
}
.page2-generate-open-modal-btn:active
{
    transform: scale(0.98);
}
.page2-kbd
{
    display: inline-block;
    padding: 0.12em 0.45em;
    font-size: 0.88em;
    font-family: var(--font);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.page2-generate-ai-form--solo
{
    margin-top: 0;
    width: 100%;
}
.page2-generate-ai-input-wrap--solo
{
    min-height: 56px;
}
.visually-hidden
{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.page2-box-image
{
    flex: 0 0 44%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: rgba(0, 0, 0, 0.2);
    border-right: 1px solid var(--border-subtle);
}
.page2-box-image .page2-img
{
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}
.page2-card-carousel
{
    position: relative;
    width: 100%;
    max-width: 100%;
}
.page2-carousel-viewport
{
    overflow: hidden;
    width: 100%;
}
.page2-carousel-track
{
    display: flex;
    flex-direction: row;
    transition: transform 0.35s ease;
}
.page2-carousel-slide
{
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.page2-carousel-slide .page2-img
{
    width: 100%;
}
.page2-carousel-btn
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-strong);
    background: rgba(15, 15, 15, 0.75);
    backdrop-filter: blur(6px);
    color: var(--text-primary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px;
    transition: background-color 0.2s, border-color 0.2s;
}
.page2-carousel-btn:hover
{
    background: rgba(30, 30, 30, 0.92);
    border-color: var(--accent);
}
.page2-carousel-prev
{
    left: 6px;
}
.page2-carousel-next
{
    right: 6px;
}
.page2-carousel-dots
{
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 0;
}
.page2-carousel-dot
{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #888;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.page2-carousel-dot.active
{
    background: #ff8c00;
    border-color: #ff8c00;
}
.page2-img
{
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    border-radius: 0;
}
.page2-box-text
{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.5rem;
    text-align: left;
}
.page2-box-heading
{
    color: var(--text-primary);
    font-family: var(--font);
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--accent-muted);
    display: inline-block;
    align-self: flex-start;
}
.page2-box-desc
{
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: clamp(0.9rem, 1.5vw, 0.98rem);
    line-height: 1.65;
    margin: 0;
    font-weight: 400;
}
.page2-box-cta
{
    color: var(--text-muted);
    font-family: var(--font);
    font-size: clamp(0.88rem, 1.4vw, 0.98rem);
    font-weight: 500;
    text-align: left;
    margin: 1.15rem 0 1rem;
    font-style: italic;
}
.page2-generate-ai-form
{
    margin-top: 0.5rem;
    width: 100%;
}
.page2-generate-ai-input-wrap
{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 54px;
    padding: 0 0.5rem 0 0.25rem;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border-mid);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.page2-generate-ai-input-wrap:focus-within
{
    border-color: rgba(255, 140, 0, 0.45);
    box-shadow: 0 0 0 1px rgba(255, 140, 0, 0.12);
}
.page2-generate-ai-add
{
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s;
}
.page2-generate-ai-add:hover
{
    background-color: #2a2929;
}
.page2-generate-ai-input
{
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 0.5rem;
    background: none;
    border: none;
    color: #fff;
    font-family: var(--font);
    font-size: 1rem;
    outline: none;
}
.page2-generate-ai-input::placeholder
{
    color: #888;
}
.page2-generate-ai-send
{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent);
    border: none;
    color: #0a0a0a;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s, transform 0.15s;
}
.page2-generate-ai-send:hover
{
    background-color: var(--accent-hover);
}
.page2-generate-ai-send:active
{
    transform: scale(0.96);
}
@media (max-width: 640px)
{
    .page2-content-box
    {
        min-height: 0;
    }

    .page2-tab-content
    {
        min-height: 0;
    }

    .page2-box-text
    {
        padding: 1.5rem;
    }

    .page2-img
    {
        max-height: min(52vw, 240px);
    }
}

@media (max-width: 480px)
{
    .site-header
    {
        padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
        padding-top: max(0, env(safe-area-inset-top, 0px));
    }

    .site-header-nav
    {
        width: 100%;
        justify-content: flex-start;
    }

    .page2-nav-inner
    {
        justify-content: flex-start;
    }

    .page2-nav-btn
    {
        padding: 0.5rem 0.7rem;
        letter-spacing: 0.05em;
    }

    .mainContent
    {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* Stats + CTA */
#site-stats-section
{
    scroll-margin-top: 5rem;
}

.page3 .page3-stat-num[id]
{
    scroll-margin-top: 5.5rem;
}

.page3
{
    display: flex;
    flex-direction: column;
    width: 100%;
    background: transparent;
}
.page3-content
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 4vw, 2rem) clamp(2.5rem, 8vw, 4rem);
    border-top: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, transparent 0%, rgba(255, 140, 0, 0.03) 50%, transparent 100%);
}
.page3-stats
{
    text-align: center;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.page3-stat-line
{
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: clamp(0.75rem, 1.6vw, 0.88rem);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0.65rem 0;
}
.page3-stat-num
{
    color: var(--accent);
    font-size: clamp(2rem, 5.5vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.page3-cta
{
    color: var(--text-primary);
    font-family: var(--font);
    font-size: clamp(1.15rem, 3vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    margin: 0;
    text-align: center;
    line-height: 1.35;
}
.page3-cta-link
{
    color: var(--accent);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}
.page3-cta-link:hover
{
    border-bottom-color: var(--accent);
    color: var(--accent-hover);
}