/* ==========================================================================
   ConflictsPro — Elevation pass 2   (PROPOSAL 2026-09-04 — NOT DEPLOYED)
   Load AFTER css/elevation.css. Scoped to body.elevated (homepage only).

   Zero copy changes: every data-i18n string stays exactly as it is.
   Companion HTML edits are class attributes / inline-style removal only:
     1. Final CTA — remove the inline style attrs on the h2, the p and the
        .hero-cta-group; add class="cta-title" to the h2, "cta-copy" to the p.
     2. Append <footer class="site-footer"> after </main> (markup at the end of
        this file). It reuses the existing nav.* keys and the partnerships@
        address; the © line is the only new string on the page.

   Principle carried over from pass 1: the hero is the page's one display
   moment (Outfit + glow). Everything below it is set in Inter, with JetBrains
   Mono reserved for eyebrows, so chapters read as one system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Type system — Outfit for hero + logo only; Inter for every heading below
   -------------------------------------------------------------------------- */
body.elevated :is(.sfc-light, .sfc-tint) :is(.cap-card-title, .feature-title) {
    font-family: var(--font-body);
    font-weight: 650;
    letter-spacing: -0.012em;
    line-height: 1.3;
}
body.elevated :is(.sfc-light, .sfc-tint) .cap-card-title { font-size: 1.05rem; }
body.elevated :is(.sfc-light, .sfc-tint) .feature-title  { font-size: 1.1rem; margin-bottom: 10px; }

/* Chapter titles step down one notch: headings, not a second hero. */
body.elevated .section-title {
    font-size: clamp(2rem, 3.2vw, 2.85rem);
    line-height: 1.1;
    padding-bottom: 0;
}
body.elevated .capabilities-heading { font-size: clamp(1.75rem, 2.6vw, 2.35rem); }
body.elevated .section-header { margin-bottom: 44px; }
body.elevated .chapter-lead { font-size: 1.25rem; }

/* --------------------------------------------------------------------------
   2. Nav — quieter logo halo; vector globe + caret in the language switch
   -------------------------------------------------------------------------- */
body.elevated .top-nav-logo .title-square {
    border-width: 1px;
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.10), 0 0 18px rgba(0, 229, 255, 0.16);
}
body.elevated .top-nav-logo:hover .title-square {
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.18), 0 0 24px rgba(0, 229, 255, 0.24);
}
body.elevated .top-nav-logo .title-text { filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.28)); }

body.elevated .language-btn .lang-icon,
body.elevated .language-btn .lang-arrow {
    display: inline-block;
    font-size: 0;
    line-height: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
body.elevated .language-btn .lang-icon {
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E5FF' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18'/%3E%3C/svg%3E");
}
body.elevated .language-btn .lang-arrow {
    width: 10px;
    height: 10px;
    opacity: 0.85;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%23F0FAFF' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 3.5l3 3 3-3'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Hero mini-stats — 2×2 on desktop so no title or caption wraps
   (base CSS already goes 2-col ≤1199px and 1-col ≤768px)
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    body.elevated .hero-mini-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 28px;
        width: min(560px, 100%);
        padding-block-start: 22px;
    }
    body.elevated .mini-stat { padding-inline: 0; border-inline-end: none; }
}
body.elevated .mini-stat-icon { width: 26px; height: 26px; }
body.elevated .mini-stat-desc { font-size: 12.5px; }

/* --------------------------------------------------------------------------
   4. Proof band — tighter, one value style for numbers and words alike
   -------------------------------------------------------------------------- */
body.elevated .stats-band.sfc-navy { padding-top: 44px; padding-bottom: 44px; }
body.elevated .stats-band-item { padding-inline: 20px; align-items: center; }
/* Content-sized columns spread across the band, so word values such as
   "AI-Assisted Review" get the width they need instead of wrapping. */
@media (min-width: 1200px) {
    body.elevated .stats-band.sfc-navy {
        grid-template-columns: repeat(4, auto);
        justify-content: space-between;
        column-gap: 24px;
    }
    body.elevated .stats-band-item { padding-inline: 0 28px; }
    body.elevated .stats-band-item:last-child { padding-inline-end: 0; }
}
body.elevated .stats-band-value {
    font-family: var(--font-body);
    font-weight: 650;
    font-size: 21px;
    letter-spacing: -0.012em;
    line-height: 1.2;
}
body.elevated .stats-band-label { font-size: 13.5px; margin-block-start: 3px; }
body.elevated .stats-band-icon { width: 32px; height: 32px; padding: 10px; }

/* --------------------------------------------------------------------------
   5. Capabilities — 2×2 cards with a readable measure instead of four
   22-character columns; cards keep equal heights, the link stays pinned
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    body.elevated .capabilities-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
body.elevated :is(.sfc-light, .sfc-tint) .cap-card { padding: 26px 26px 24px; }
body.elevated :is(.sfc-light, .sfc-tint) .cap-card-desc { font-size: 0.95rem; line-height: 1.6; }
body.elevated :is(.sfc-light, .sfc-tint) .cap-card-link { font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   6. Trust strip — an eyebrow row over four titles. The two-line clamped
   captions (rendered as "…") are hidden; they were borrowed from other
   sections anyway. Strip height drops from 263px to ~150px.
   -------------------------------------------------------------------------- */
body.elevated .trust-strip.sfc-tint { padding-top: 32px; padding-bottom: 32px; }
body.elevated .trust-strip .trust-kicker {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    letter-spacing: 0.2em;
}
body.elevated .trust-strip .trust-item small { display: none; }
body.elevated .trust-strip .trust-item { align-items: center; }
body.elevated .trust-strip .trust-item strong { font-size: 14px; }
body.elevated .trust-strip .trust-item svg { width: 22px; height: 22px; }
@media (min-width: 1200px) {
    body.elevated .trust-strip.sfc-tint {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 22px;
        align-items: center;
    }
    body.elevated .trust-strip .trust-kicker { grid-column: 1 / 4; grid-row: 1; }
    body.elevated .trust-strip .trust-link { grid-column: 4; grid-row: 1; justify-self: end; }
    body.elevated .trust-strip .trust-item { padding-inline: 22px; }
    body.elevated .trust-strip .trust-item:nth-child(2) { padding-inline-start: 0; border-inline-start: none; }
}

/* --------------------------------------------------------------------------
   7. Stat tiles (chapters 02 + 03) — same grammar as the impact tiles in 04:
   left-aligned, eyebrow label above, value below, no gradient, no wrap.
   Chapter 03 mirrors 02 (tiles left, text right) so the page zig-zags.
   -------------------------------------------------------------------------- */
body.elevated :is(.sfc-light, .sfc-tint) .about-stats { gap: 14px; }
/* Tiles top-align with the chapter lead instead of floating mid-column. */
body.elevated :is(.sfc-light, .sfc-tint) .about-content { align-items: start; }
body.elevated :is(.sfc-light, .sfc-tint) .stat-item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    gap: 10px;
    min-height: 104px;
    padding: 18px 20px 20px;
    text-align: left;
    background: #FBFDFE;
    border-radius: 8px;
    box-shadow: none;
}
body.elevated :is(.sfc-light, .sfc-tint) .stat-item:hover {
    transform: none;
    box-shadow: none;
    background: var(--e-tint);
}
body.elevated :is(.sfc-light, .sfc-tint) .stat-number {
    font-family: var(--font-body);
    font-weight: 650;
    font-size: 1.55rem;
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin: 0;
}
body.elevated :is(.sfc-light, .sfc-tint) .stat-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #7A8CA0;
}
@media (min-width: 1025px) { body.elevated #about .about-stats { order: -1; } }
@media (max-width: 768px) {
    body.elevated :is(.sfc-light, .sfc-tint) .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.elevated :is(.sfc-light, .sfc-tint) .stat-number { font-size: 1.3rem; }
    body.elevated :is(.sfc-light, .sfc-tint) .stat-item { min-height: 0; padding: 16px 16px 18px; }
}

/* --------------------------------------------------------------------------
   8. Chapter 02 grid — four cards get four columns (no orphan), and feature
   cards adopt the capability-card scale so the page has one card system.
   -------------------------------------------------------------------------- */
body.elevated :is(.sfc-light, .sfc-tint) .feature-grid { gap: 18px; margin-bottom: 0; }
@media (min-width: 1200px) {
    body.elevated #ai-workflow .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 769px) and (max-width: 1199px) {
    body.elevated #ai-workflow .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.elevated :is(.sfc-light, .sfc-tint) .feature-card {
    display: flex;
    flex-direction: column;
    padding: 26px 26px 24px;
    cursor: default;
}
body.elevated :is(.sfc-light, .sfc-tint) .feature-icon { width: 48px; height: 48px; margin-bottom: 20px; }
body.elevated :is(.sfc-light, .sfc-tint) .feature-icon svg { width: 22px; height: 22px; filter: none; }
body.elevated :is(.sfc-light, .sfc-tint) .feature-card:hover .feature-icon { transform: none; border-color: var(--e-hairline); }
body.elevated :is(.sfc-light, .sfc-tint) .feature-card:hover .feature-icon svg { transform: none; color: var(--e-teal-deep); }
body.elevated :is(.sfc-light, .sfc-tint) .feature-description { font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }
body.elevated :is(.sfc-light, .sfc-tint) .feature-metric { margin-top: auto; padding-top: 16px; font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   9. Contact — intro beside the form (sticky), one card instead of a card
   inside a card, everything left-aligned under a left-aligned chapter head
   -------------------------------------------------------------------------- */
body.elevated #contact .contact-intro { text-align: left; }
@media (min-width: 1025px) {
    body.elevated #contact .contact-container {
        max-width: none;
        display: grid;
        grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
        gap: 56px;
        align-items: start;
    }
    body.elevated #contact .contact-intro { position: sticky; top: 96px; margin-bottom: 0; }
}
body.elevated .sfc-tint .contact-form-container { padding: 0; background: none; border: none; box-shadow: none; }
body.elevated .sfc-tint .contact-form { padding: 40px 44px; box-shadow: var(--e-card-shadow); }
body.elevated .sfc-tint .contact-intro h3 { font-size: 1.5rem; margin-bottom: 14px; }
body.elevated .sfc-tint .contact-intro p { font-size: 1rem; line-height: 1.65; }
body.elevated .sfc-tint :is(.success-message, .error-message) {
    background: var(--e-paper);
    border: 1px solid var(--e-hairline);
    border-radius: 12px;
    box-shadow: var(--e-card-shadow);
    backdrop-filter: none;
    color: var(--e-slate);
}
body.elevated .sfc-tint :is(.success-message, .error-message) h4 { color: var(--e-ink); }
@media (max-width: 640px) { body.elevated .sfc-tint .contact-form { padding: 24px 18px; } }

/* --------------------------------------------------------------------------
   10. Primary buttons — one gradient, one face, one radius across the page
   -------------------------------------------------------------------------- */
body.elevated .submit-button {
    background: linear-gradient(135deg, var(--color-cyan-primary), var(--color-cyan-bright));
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    padding: 15px 28px;
    border-radius: 6px;
}
body.elevated .submit-button:hover {
    background: linear-gradient(135deg, var(--color-cyan-bright), var(--color-cyan-primary));
    box-shadow: 0 10px 28px -8px rgba(0, 180, 220, 0.6);
}

/* --------------------------------------------------------------------------
   11. Final CTA — a full-bleed dark chapter (no floating bordered box, no
   120px void around it), headline on the chapter-title scale
   -------------------------------------------------------------------------- */
body.elevated .cta-section.final-cta {
    margin: 0 calc(50% - 50vw);
    padding: 104px max(60px, calc(50vw - 590px));
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
    background:
        radial-gradient(ellipse 60% 70% at 50% 0%, rgba(0, 229, 255, 0.10), transparent),
        linear-gradient(180deg, #0B1626 0%, #000A12 100%);
}
body.elevated .final-cta .cta-title {
    font-family: var(--font-body);
    font-weight: 650;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    letter-spacing: -0.018em;
    line-height: 1.15;
    color: #FFFFFF;
    max-width: 760px;
    margin: 0 auto 18px;
    text-wrap: balance;
}
body.elevated .final-cta .cta-copy {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 620px;
    margin: 0 auto 26px;
}
body.elevated .final-cta .cta-benefits { margin: 0 0 32px; font-size: 0.95rem; color: #6FD4E8; }
body.elevated .final-cta .hero-cta-group { margin-top: 0; }
body.elevated .cta-button {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0;
    padding: 16px 28px;
    border-radius: 6px;
    min-width: 228px;
    text-align: center;
}
body.elevated .cta-button.primary {
    background: linear-gradient(135deg, var(--color-cyan-primary), var(--color-cyan-bright));
    box-shadow: 0 8px 24px rgba(0, 229, 255, 0.3);
}
body.elevated .cta-button.primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 229, 255, 0.5); }
body.elevated .cta-button.secondary {
    background: transparent;
    color: var(--color-white-ice);
    border: 1px solid rgba(0, 229, 255, 0.3);
    backdrop-filter: none;
}
body.elevated .cta-button.secondary:hover {
    border-color: var(--color-cyan-primary);
    background: rgba(0, 229, 255, 0.06);
    color: var(--color-cyan-primary);
    box-shadow: none;
    transform: none;
}
@media (max-width: 900px) { body.elevated .cta-section.final-cta { padding: 72px 24px; } }

/* --------------------------------------------------------------------------
   12. Footer — the page currently ends on the CTA box with no site footer
   -------------------------------------------------------------------------- */
body.elevated .site-footer {
    position: relative;
    z-index: 2;
    background: #000A12;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #7E97AC;
    padding: 36px max(60px, calc(50vw - 590px)) 32px;
}
body.elevated .footer-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px 32px;
}
body.elevated .footer-brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #B9CCDC;
    text-decoration: none;
}
body.elevated .footer-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; }
body.elevated .footer-nav a,
body.elevated .footer-mail { color: #B9CCDC; text-decoration: none; font-size: 13.5px; font-weight: 500; }
body.elevated .footer-nav a:hover,
body.elevated .footer-mail:hover { color: #FFFFFF; }
body.elevated .footer-meta {
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12.5px;
    color: #7E97AC;
}
@media (max-width: 900px) {
    body.elevated .site-footer { padding: 28px 24px; }
    body.elevated .footer-inner { grid-template-columns: 1fr; }
    body.elevated .footer-nav { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   13. Motion — the ambient mesh / grid / CTA glow also stop under
   prefers-reduced-motion (pass 1 only shortened transitions)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.elevated::before,
    body.elevated::after,
    body.elevated .cta-section::before,
    body.elevated .badge-dot { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Footer markup to append after </main> in index.html:

   <footer class="site-footer" role="contentinfo">
       <div class="footer-inner">
           <a href="#home" class="footer-brand" aria-label="ConflictsPro home">ConflictsPro</a>
           <nav class="footer-nav" aria-label="Footer">
               <a href="#features" data-i18n="nav.platform">Platform</a>
               <a href="#about" data-i18n="nav.solutions">Solutions</a>
               <a href="#about" data-i18n="nav.aboutUs">About Us</a>
               <a href="#roi-section" data-i18n="nav.pricing">Pricing</a>
               <a href="login.html" data-i18n="nav.logIn">Log In</a>
               <a href="#demo" data-i18n="nav.requestDemo">Request Demo</a>
           </nav>
           <a href="mailto:partnerships@conflictspro.com" class="footer-mail">partnerships@conflictspro.com</a>
           <div class="footer-meta">© 2026 ConflictsPro</div>
       </div>
   </footer>
   -------------------------------------------------------------------------- */