/* ============================================================
   refine.css  —  section-background cohesion pass
   Loaded LAST so these rules win the cascade.

   Goal: replace the muddy purple-black (#171723) + flat pure-black
   (#000) mix with ONE deliberate navy family, so the lower half of
   the page reads as a single engineered surface instead of a set of
   unrelated dark blocks.

   Palette (all cool navy, anchored on the brand --accent-dark #020A2C):
     --nav-base   #020A2C   brand navy   (signature sections)
     --nav-panel  #061029   lifted navy  (alternating sections)
     --nav-deep   #01061C   grounding navy (footer)
   ============================================================ */

:root {
    --nav-base:  #020A2C;
    --nav-panel: #061029;
    --nav-deep:  #01061C;
    --nav-seam:  rgba(255, 255, 255, .06);
}

/* --- Unified alternating rhythm across the four dark sections --- */
/* was #171723 (purple) -> lifted navy */
.lp-serve.has-background:before { background: var(--nav-panel); }
/* was #020A2C -> keep as brand base */
.lp-clarityos.has-background:before {
    background: radial-gradient(ellipse 90% 80% at 50% 50%, #000 35%, var(--nav-base) 100%);
}
/* was #171723 (purple) -> lifted navy */
.lp-map.has-background:before { background: var(--nav-panel); }
/* was #020A2C -> keep as brand base */
.lp-cards.has-background:before { background: var(--nav-base); }

/* --- Hairline seams so section transitions look intentional --- */
.lp-serve.has-background:before,
.lp-clarityos.has-background:before,
.lp-map.has-background:before,
.lp-cards.has-background:before {
    border-top: 1px solid var(--nav-seam);
}

/* --- Callout: flat #000 -> refined navy with a soft brand vignette --- */
.callout-section:not(.is-inverted) .callout-background {
    background:
        radial-gradient(ellipse 70% 120% at 50% 0%, rgba(16, 48, 233, .18), transparent 60%),
        linear-gradient(180deg, var(--nav-base) 0%, var(--nav-deep) 100%);
    border-top: 1px solid var(--nav-seam);
}

/* --- Footer: keep it plain black, no navy block / seam --- */
.main-footer .footer-default,
.main-footer .footer-legal {
    background: #000;
}

/* --- Accent words in headings: orange (kept distinct from the blue
   section eyebrows) --- */
.text-accent { color: var(--decorative-color) !important; }

/* ...but keep these three sections' accent words blue */
.lp-hero .text-accent,
#clarityos .text-accent,
#romania .text-accent { color: var(--accent-color) !important; }

/* ============================================================
   The Infrastructure — showcase layout (native diagram + laptop mask
   components, paired side-by-side) lives entirely in
   css/clarityos-custom.css (.clarityos-pair).
   ============================================================ */

/* --- Who We Serve: force a clean, balanced 2-column layout earlier --- */
/* The original stacks copy + hex below 1199px, leaving a big void.
   Bring the two columns side-by-side from 900px and balance their widths. */
@media screen and (min-width: 900px) {
    .lp-serve .section-container {
        flex-direction: row;
        align-items: center;
        gap: 3.75em;
    }
    .lp-serve .serve-copy { flex: 1 1 48%; }
    .lp-serve .serve-hex  { flex: 1 1 52%; margin: 0; }
}

/* --- Romania: left-align the section title to match its own left-aligned
   body copy and the other left-aligned sections (Company, Who We Serve) --- */
#romania .section-title { text-align: left; }

/* ============================================================
   Section-name (eyebrow) consistency pass
   Decision: ALL section kickers use the brand BLUE (#1030E9) and are
   LEFT-aligned.
   - Blue is the primary brand colour (logo, buttons, links); orange
     (#FFA802) is the "live signal" accent, kept only for the pulsing
     status dots — not repeated as section labels.
   - Left-aligned kickers + headings are more scannable and editorial
     than centred ones, and now every section matches.
   ============================================================ */

/* --- Colour: convert the two orange eyebrows (Company, Who We Serve) to
   the brand blue, so all section accents match --- */
#company .section-title,
#who-we-serve .section-title {
    --accent-color: #1030E9;
}

/* --- Alignment: left-align the headers that were centred --- */
#clarityos .section-title,
#how-it-works .section-header,
#how-it-works .section-title,
.callout-section .section-header,
.callout-section .section-title {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* keep the final CTA coherent with its now left-aligned heading */
.callout-section .section-button.is-centered { text-align: left; }
.callout-section .section-button.is-centered .button-group { justify-content: flex-start; }

/* left-align the intro paragraphs under the now left-aligned headers */
#how-it-works .section-headline,
.callout-section .section-headline,
.callout-section .help-block {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

/* --- Who We Serve: more breathing room below the 30+/1M+/10K+ stats --- */
.lp-serve .serve-stats { padding-bottom: 2.5em; }

/* ============================================================
   Briefing request modal — dark / orange-accent restyle
   Matches the site's own dark navy sections (--background-accent)
   and orange decorative accent (--decorative-color), with clearly
   outlined form fields rather than a plain underline.
   ============================================================ */

.briefing-overlay .overlay-bg { background: rgba(0, 0, 0, .86) !important; }

.briefing-overlay .overlay-inner {
    max-width: 34.375em;
    padding: 3.75em 3.75em 3.125em;
    background: var(--background-accent);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
@media screen and (max-width: 899px) {
    .briefing-overlay .overlay-inner { padding: 3.75em 1.5625em 2.1875em; }
}

.briefing-overlay .overlay-header { margin-bottom: 0; }
.briefing-overlay .overlay-close a {
    background: var(--decorative-color);
    color: var(--background-accent);
}

.briefing-intro { margin-bottom: 2.5em; }
.briefing-intro .briefing-eyebrow {
    display: block;
    font-size: .75em;
    line-height: 1.4em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--decorative-color);
    margin-bottom: 1em;
}
.briefing-intro h3 {
    font-weight: 700;
    font-style: normal;
    font-size: 2.125em;
    line-height: 1.15em;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: .4375em;
}
.briefing-intro p {
    font-size: 1em;
    line-height: 1.5em;
    color: rgba(255, 255, 255, .6);
    max-width: 26em;
}

.briefing-form .form-group-custom { margin-bottom: 1.5625em; }

.briefing-form .label-custom {
    display: flex;
    align-items: baseline;
    font-size: .75em;
    line-height: 1.4em;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    margin-bottom: .625em;
}
.briefing-form .label-custom .label-optional {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.05em;
    margin-left: .625em;
    color: rgba(255, 255, 255, .35);
}

.briefing-form .form-control-custom {
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: .625em;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-size: 1em;
    line-height: 1.4em;
    padding-left: .875em;
    padding-right: .875em;
    padding-top: .64375em;
    padding-bottom: .64375em;
    transition: border-color .2s ease, background .2s ease;
}
.briefing-form .form-control-custom::-webkit-input-placeholder { color: rgba(255, 255, 255, .4); }
.briefing-form .form-control-custom:-moz-placeholder { opacity: 1; color: rgba(255, 255, 255, .4); }
.briefing-form .form-control-custom::-moz-placeholder { opacity: 1; color: rgba(255, 255, 255, .4); }
.briefing-form .form-control-custom:focus {
    outline: none;
    border-color: var(--decorative-color);
    background: rgba(255, 255, 255, .07);
}
.briefing-form textarea.form-control-custom {
    resize: none;
    min-height: 4.5em;
}

.briefing-form .form-button { margin-top: 1.875em; }
.briefing-form .form-button .button-custom {
    background: var(--decorative-color);
    color: var(--background-accent);
}
.briefing-form .form-button .button-custom:hover {
    background: #fff;
    color: var(--background-accent);
}
.briefing-form .form-button .button-custom[disabled] { opacity: .6; }

.briefing-overlay .form-alert { margin-bottom: 1.875em; }
.briefing-overlay .form-alert.has-error { color: #FF8A80; }
.briefing-overlay .form-alert.has-success { color: #FFA802; }