/* _page-hero.css — shared styles for the Views/Shared/_PageHero.cshtml partial
   (the .ph-hero block). Used by /contact, /pricing, and any future public page
   that renders _PageHero.

   Tokens are scoped on .ph-hero itself so the hero renders consistently
   regardless of the parent page's token scope. Tenant theme still propagates
   via --zf-primary / --zf-secondary. */

.ph-hero {
    --ink:        #0b1b34;
    --muted:      #6b7487;
    --paper:      #fbfbfd;
    --wash:       #f3f5fb;
    --brand:      var(--zf-primary,   #1870d1);
    --brand-deep: var(--zf-secondary, #0f4ea3);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 64px 24px 48px;
    text-align: center;
    background: radial-gradient(ellipse at 15% 10%, rgba(196, 181, 253, 0.35), transparent 55%),
                radial-gradient(ellipse at 85% 15%, rgba(253, 245, 180, 0.35), transparent 55%),
                var(--paper);
    border-radius: 18px;
}

.ph-hero__pill {
    display: inline-block;
    padding: 8px 20px;
    background: #fff;
    border: 1px solid rgba(24, 112, 209, 0.18);
    color: var(--brand-deep);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(10, 27, 52, 0.05);
}

.ph-hero__title {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    max-width: 22ch;
}

.ph-hero__title--accent {
    color: var(--brand);
    display: block;
}

.ph-hero__title--main {
    color: var(--ink);
    display: block;
}

.ph-hero__subtitle {
    margin: 0;
    max-width: 62ch;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.6;
}

.ph-hero__cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.22s ease, filter 0.18s ease;
    box-shadow: 0 10px 24px -14px rgba(24, 112, 209, 0.55);
}

.ph-hero__cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 14px 28px -14px rgba(24, 112, 209, 0.65);
    color: #fff;
}

/* Dark theme */
html[data-theme="dark"] .ph-hero {
    --ink:    #e8ecf5;
    --muted:  #8d95a8;
    --paper:  #161a25;
    --wash:   #1c2231;
    background: radial-gradient(ellipse at 15% 10%, rgba(80, 70, 180, 0.35), transparent 55%),
                radial-gradient(ellipse at 85% 15%, rgba(90, 110, 40, 0.2), transparent 55%),
                var(--paper);
}

html[data-theme="dark"] .ph-hero__pill {
    background: var(--wash);
    border-color: rgba(120, 160, 255, 0.25);
    color: #7FB0FF;
}

/* Mobile */
@media (max-width: 720px) {
    .ph-hero { padding: 48px 18px 36px; }
    .ph-hero__title { font-size: clamp(1.8rem, 5.8vw, 2.4rem); }
    .ph-hero__subtitle { font-size: 14px; }
}