/* =========================================================================
   SimplyOnSite Marketing Visual Language  (--so-* tokens + .so-* utilities)
   -------------------------------------------------------------------------
   Single source of truth for the PUBLIC marketing pages (Home, Features,
   Pricing, About, Contact, Help, etc.). Centralizes the hero gradient,
   shared keyframes, typography scale, section rhythm, and unified buttons
   that were previously copy-pasted across ~7 page CSS files.

   Built ON TOP of the design-system (--sos-*) layer and the DevExpress
   Fluent (--dxds-*) tokens, so everything tracks the active theme +
   light/dark mode. The marketing pages read --theme-accent-color, which
   HomeLayout sets on the .home-layout wrapper.

   Rules (see CLAUDE.md):
   - Only reference --dxds-* tokens DEFINED in the Fluent theme bundle.
   - Never use --bs-* or invented --dxds tokens.
   - Linked in App.razor immediately AFTER app.css.
   ========================================================================= */

:root {
    /* ---- Brand tokens (theme-tracking; replace hardcoded #0078D4) ---- */
    --so-brand: var(--theme-accent-color, var(--sos-accent));
    --so-brand-deep: var(--sos-accent-deep);
    --so-brand-soft: var(--sos-accent-soft);
    --so-on-accent: var(--sos-on-accent);

    /* Hero / accent gradient (the one that was duplicated everywhere) */
    --so-hero-gradient: linear-gradient(135deg, var(--so-brand) 0%, var(--so-brand-deep) 50%, var(--so-brand) 100%);
    --so-accent-gradient: linear-gradient(135deg, var(--so-brand) 0%, var(--so-brand-deep) 100%);

    /* ---- Neutral ink tokens (marketing copy on light surfaces) ---- */
    --so-ink-strong: #1a1a1a;
    --so-ink: #333333;
    --so-ink-muted: #666666;
    --so-surface: #ffffff;
    --so-surface-alt: #f8f9fa;
    --so-surface-dark: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --so-border-subtle: rgba(0, 0, 0, 0.08);

    /* ---- Typography scale ---- */
    --so-fs-display: 3.5rem;
    --so-fs-h1: 2.75rem;
    --so-fs-h2: 2.5rem;
    --so-fs-h3: 1.5rem;
    --so-fs-body: 1.125rem;
    --so-fs-caption: 0.875rem;

    --so-fw-regular: 400;
    --so-fw-medium: 500;
    --so-fw-semibold: 600;
    --so-fw-bold: 700;

    --so-lh-tight: 1.1;
    --so-lh-snug: 1.4;
    --so-lh-normal: 1.6;
    --so-lh-relaxed: 1.8;
}

/* =========================================================================
   Section rhythm helpers
   ========================================================================= */
.so-section {
    padding: 5rem 2rem;
    background: var(--so-surface);
}

.so-section--alt {
    background: var(--so-surface-alt);
}

.so-container {
    max-width: 1200px;
    margin: 0 auto;
}

.so-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem auto;
}

.so-section-header h2 {
    font-size: var(--so-fs-h2);
    font-weight: var(--so-fw-bold);
    color: var(--so-ink-strong);
    margin: 0 0 1rem 0;
}

.so-section-header p {
    font-size: 1.25rem;
    color: var(--so-ink-muted);
    margin: 0;
}

/* =========================================================================
   Hero
   ========================================================================= */
.so-hero {
    background: var(--so-hero-gradient);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Animated dot-pattern overlay */
.so-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
    animation: patternFloat 20s ease-in-out infinite;
    pointer-events: none;
}

/* =========================================================================
   Coming-soon badge (was used in 5 markups but defined nowhere)
   ========================================================================= */
.coming-soon-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    margin-bottom: 1.25rem;
    border-radius: var(--sos-radius-pill);
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: var(--so-fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

/* On a light (non-hero) surface, render with brand text instead of white */
.so-section .coming-soon-badge,
.so-section--alt .coming-soon-badge {
    background: var(--so-brand-soft);
    border-color: transparent;
    color: var(--so-brand);
}

/* =========================================================================
   Unified buttons (aligned with the nav's .nav-btn family)
   ========================================================================= */
.so-btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: var(--so-fw-semibold);
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    border: 2px solid transparent;
    border-radius: var(--sos-radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.so-btn--lg {
    padding: 1.125rem 2.5rem;
    font-size: 1.125rem;
}

/* Primary — brand gradient, white text */
.so-btn--primary {
    background: var(--so-accent-gradient);
    color: var(--so-on-accent);
    border-color: transparent;
    box-shadow: var(--sos-shadow-md);
}

.so-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--sos-shadow-lg);
    color: var(--so-on-accent);
}

/* Secondary — outline */
.so-btn--secondary {
    background: transparent;
    color: var(--so-brand);
    border-color: var(--so-brand);
}

.so-btn--secondary:hover {
    background: var(--so-brand-soft);
    transform: translateY(-2px);
}

/* Light — solid white, brand text (for use on a colored/hero surface) */
.so-btn--light {
    background: #ffffff;
    color: var(--so-brand);
    border-color: transparent;
}

.so-btn--light:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* On a hero/colored surface, primary & secondary use translucent white chrome
   so they stay legible regardless of the underlying brand color. */
.so-hero .so-btn--primary,
.so-hero .so-btn--secondary {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: none;
}

.so-hero .so-btn--primary:hover,
.so-hero .so-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

/* =========================================================================
   Accent-icon utility classes (replace inline linear-gradient styles)
   ========================================================================= */
.so-icon--brand  { background: linear-gradient(135deg, var(--so-brand) 0%, var(--so-brand-deep) 100%); }
.so-icon--moss   { background: linear-gradient(135deg, #498205 0%, #3a6604 100%); }
.so-icon--violet { background: linear-gradient(135deg, #8661C5 0%, #6a4d9e 100%); }
.so-icon--rose   { background: linear-gradient(135deg, #E3008C 0%, #b0006e 100%); }
.so-icon--mint   { background: linear-gradient(135deg, #00CC6A 0%, #00a355 100%); }
.so-icon--indigo { background: linear-gradient(135deg, #4F6BED 0%, #3d54ba 100%); }

/* =========================================================================
   Shared keyframes (defined ONCE here; pages no longer duplicate them)
   ========================================================================= */
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes patternFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(10px, 10px); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-15px); }
}

/* =========================================================================
   Reduced-motion: disable the infinite, decorative animations
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .so-hero,
    .so-hero::before {
        animation: none !important;
    }

    .phone-mockup {
        animation: none !important;
    }

    /* Neutralize the looping ambient motion app-wide for marketing pages */
    *,
    *::before,
    *::after {
        animation-iteration-count: 1 !important;
    }
}