/* ==========================================================
   SOLUTIONS PAGE — matches your real solutions.html markup
   (.sol-intro, .problem-section, .showcase-section,
   .industries-section, .process-section, .faq-section).
   Loaded after products.css per your <head> order, so shared
   bits (.eyebrow, .back-home, .cta-banner) already exist —
   only overridden here where this page needs something
   different (the full-bleed hero treatment).
   ========================================================== */

/* ==========================================
   HERO — .sol-intro goes full-bleed, same
   dark/crimson overlay treatment as Products.
   Pure CSS background (no <img>/<video> tag
   needed) at assets/hero/solutions-hero-bg.jpg —
   if it 404s, the gradient alone still renders,
   so nothing breaks while you source the photo.
========================================== */

.sol-intro {
    position: relative;
    overflow: hidden;
    color: var(--white);
    padding: 170px 0 0;
    background:
        linear-gradient(115deg, rgba(21, 17, 26, .92) 0%, rgba(21, 17, 26, .62) 45%, rgba(163, 31, 65, .38) 100%),
        /* TEMP placeholder — reusing an existing clean image until a dedicated
           solutions-hero-bg.jpg is supplied (see chat notes) */
        url('../assets/decor/hero-bg.png') center / cover no-repeat,
        var(--ink);
}

.sol-intro .back-home {
    color: rgba(255, 255, 255, .68);
}

.sol-intro .back-home:hover {
    color: var(--white);
}

.sol-intro .eyebrow::before {
    box-shadow: 0 0 0 3px rgba(203, 41, 82, .4);
}

.sol-intro h1 {
    color: var(--white);
    font-size: clamp(32px, 4.2vw, 50px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.08;
    max-width: 780px;
    margin-bottom: 20px;
}

.sol-intro .lead {
    font-size: 17.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
    max-width: 660px;
    margin-bottom: 56px;
}

.stat-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transform: translateY(1px);
}

.stat-card {
    background: rgba(21, 17, 26, .35);
    padding: 28px 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px;
}

.stat-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 700;
    color: var(--white);
}

.stat-suffix {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    color: var(--crimson);
}

.stat-label {
    width: 100%;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .65);
    margin-top: 4px;
}

@media (max-width:860px) {
    .stat-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:980px) {
    .sol-intro {
        padding: 150px 0 0;
    }
}

@media (max-width:620px) {
    .sol-intro {
        padding: 130px 0 0;
    }

    .sol-intro .lead {
        margin-bottom: 40px;
    }
}

/* ==========================================
   PROBLEM / SOLUTION GRID
   Each card now splits into two zones:
   .problem-visual  — duotone photo (or, until
                       a photo is supplied, a
                       plain crimson/ink gradient
                       — same graceful-degrade
                       pattern as .sol-intro above)
                       carrying the tag + heading
   .solution-line   — unchanged white footer
========================================== */

.problem-section {
    padding: 96px 0 88px;
}

.problem-section .eyebrow {
    margin-top: 64px;
}

.problem-section h2 {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 12px;
}

.section-lead {
    font-size: 15.5px;
    color: var(--gray-700);
    max-width: 56ch;
    margin-bottom: 44px;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.problem-card {
    background: var(--white);
    border: 1px solid var(--gray-150);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}

.problem-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -20px rgba(21, 17, 26, .25);
}

/* Photo zone — top of card. Duotone crimson/ink scrim
   sits over the background-image so the white heading
   stays readable no matter what photo lands here. If the
   image path 404s, the gradient alone still fills the
   space (nothing breaks while photos are being sourced). */
.problem-visual {
    position: relative;
    min-height: 172px;
    padding: 20px 22px 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    background-color: var(--ink);
    background-size: cover;
    background-position: center;
}

.problem-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, rgba(21, 17, 26, .78) 0%, rgba(163, 31, 65, .55) 100%);
}

.problem-visual>* {
    position: relative;
    z-index: 1;
}

.problem-visual .problem-tag {
    align-self: flex-start;
    color: var(--white);
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Higher specificity than ".problem-card h3" below on purpose —
   without this, source order lets the dark ink color win and the
   heading disappears against the dark photo/gradient. */
.problem-card .problem-visual h3 {
    color: var(--white);
}

.problem-tag {
    display: inline-flex;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--crimson-dark);
    background: var(--crimson-tint);
    padding: 5px 10px;
    border-radius: var(--radius-pill);
}

.problem-card h3 {
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
}

/* Muted "Also common" card keeps the plain text layout —
   no photo, so it visually recedes below the six main cards. */
.problem-card-muted {
    background: var(--bg-alt);
    padding: 26px;
    gap: 18px;
}

.problem-card-muted .problem-tag {
    color: var(--gray-500);
    background: var(--gray-150);
}

.problem-card-muted h3 {
    flex-grow: 1;
}

.solution-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px 20px;
    border-top: 1px solid var(--gray-150);
    margin-top: auto;
}

.problem-card-muted .solution-line {
    padding: 16px 0 0;
}

.solution-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--crimson-tint);
    color: var(--crimson-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.solution-icon svg {
    width: 18px;
    height: 18px;
}

.solution-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gray-500);
    margin-bottom: 2px;
}

.solution-line a {
    font-size: 14px;
    font-weight: 700;
    color: var(--crimson);
    transition: color .2s ease;
}

.solution-line a:hover {
    color: var(--crimson-dark);
}

@media (max-width:980px) {
    .problem-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:620px) {
    .problem-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   SHOWCASE — dashboard mockup + charts
========================================== */

.showcase-section {
    padding: 88px 0;
    background: var(--bg-alt);
}

.showcase-section h2 {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 40px;
}

.showcase-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    align-items: start;
}

.mockup-frame {
    background: var(--white);
    border: 1px solid var(--gray-150);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 44px -28px rgba(21, 17, 26, .3);
}

.mockup-bar {
    display: flex;
    gap: 6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-150);
}

.mockup-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-150);
}

.mockup-bar span:nth-child(1) {
    background: #E5A2A2;
}

.mockup-bar span:nth-child(2) {
    background: #E9C97F;
}

.mockup-bar span:nth-child(3) {
    background: #9FCBA6;
}

.mockup-body {
    position: relative;
    min-height: 320px;
    padding: 0;
}

.mockup-map-fake {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--gray-150) 1px, transparent 1px),
        linear-gradient(90deg, var(--gray-150) 1px, transparent 1px),
        var(--bg-alt);
    background-size: 28px 28px;
}

.mockup-pin-card {
    position: absolute;
    top: 34px;
    left: 28px;
    background: var(--white);
    border: 1px solid var(--gray-150);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    box-shadow: 0 10px 24px -16px rgba(21, 17, 26, .35);
    font-size: 13px;
}

.mockup-pin-card strong {
    display: block;
    color: var(--ink);
    margin-bottom: 2px;
}

.pin-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 600;
}

.pin-status.overspeed {
    color: var(--crimson);
}

.mockup-fleet-panel {
    position: absolute;
    bottom: 24px;
    right: 24px;
    left: 24px;
    max-width: 260px;
    margin-left: auto;
    background: var(--white);
    border: 1px solid var(--gray-150);
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: 0 14px 30px -20px rgba(21, 17, 26, .3);
}

.mfp-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gray-500);
    margin-bottom: 10px;
}

.mfp-header span {
    color: var(--gray-700);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.mfp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ink);
}

.mfp-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.mfp-status.ok {
    background: #E6F3E8;
    color: #2F7A3D;
}

.mfp-status.bad {
    background: var(--crimson-tint);
    color: var(--crimson-dark);
}

.showcase-caption {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 14px;
}

.showcase-charts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chart-card {
    background: var(--white);
    border: 1px solid var(--gray-150);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.chart-card h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 16px;
}

.chart-card svg {
    display: block;
    margin: 0 auto;
    max-width: 220px;
}

.chart-card .bars {
    max-width: 100%;
}

.donut-number {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    fill: var(--ink);
}

.donut-sub {
    font-size: 9px;
    fill: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bar-label {
    font-size: 9px;
    fill: var(--gray-500);
}

.bar-value {
    font-size: 10px;
    fill: var(--ink);
    font-weight: 700;
}

.chart-caption {
    font-size: 12.5px;
    color: var(--gray-500);
    margin-top: 14px;
    text-align: center;
}

@media (max-width:900px) {
    .showcase-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   INDUSTRIES WE SERVE
========================================== */

.industries-section {
    position: relative;
    overflow: hidden;
    padding: 88px 0;
}

/* Edge images — faded strips of imagery at the left and right
   edges of the section, fading to transparent toward the center
   so they sit behind the card grid without competing with it.
   If the image paths 404, the strips are simply invisible and
   the section still renders exactly as before. */
.industries-section::before,
.industries-section::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 260px;
    background-size: cover;
    background-position: center;
    opacity: .45;
    z-index: 0;
    pointer-events: none;
}

.industries-section::before {
    left: 0;
    background-image: url('../assets/decor/left.png');
    -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, transparent 100%);
}

.industries-section::after {
    right: 0;
    background-image: url('../assets/decor/right.png');
    -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 100%);
    mask-image: linear-gradient(to left, #000 0%, transparent 100%);
}

.industries-section .wrap {
    position: relative;
    z-index: 1;
}

@media (max-width:860px) {

    .industries-section::before,
    .industries-section::after {
        display: none;
    }
}

.industries-section h2 {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 40px;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.industry-card {
    background: var(--bg-alt);
    border: 1px solid var(--gray-150);
    border-radius: var(--radius-md);
    padding: 26px 24px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.industry-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -20px rgba(21, 17, 26, .25);
}

.industry-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--white);
    border: 1px solid var(--gray-150);
    color: var(--crimson);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.industry-icon svg {
    width: 19px;
    height: 19px;
}

.industry-card h3 {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
}

.industry-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gray-700);
}

@media (max-width:860px) {
    .industries-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:560px) {
    .industries-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   HOW IT WORKS
========================================== */

.process-section {
    padding: 88px 0;
    background: var(--bg-alt);
}

.process-section h2 {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 44px;
}

.process-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}

.process-row::before {
    content: "";
    position: absolute;
    top: 19px;
    left: calc(12.5% + 20px);
    right: calc(12.5% + 20px);
    border-top: 2px dashed var(--gray-300);
    z-index: 0;
}

.process-step {
    position: relative;
    z-index: 1;
}

.process-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--crimson);
    color: var(--crimson);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 16px;
}

.process-step h3 {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 8px;
}

.process-step p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gray-700);
}

@media (max-width:860px) {
    .process-row {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .process-row::before {
        display: none;
    }
}

@media (max-width:560px) {
    .process-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   FAQ — button-based accordion (needs solutions.js)
========================================== */

.faq-section {
    padding: 88px 0;
}

.faq-section h2 {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 40px;
}

.faq-list {
    max-width: 800px;
}

.faq-item {
    border-bottom: 1px solid var(--gray-150);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 4px;
    background: none;
    border: none;
    text-align: left;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
}

.faq-toggle {
    font-size: 20px;
    font-weight: 400;
    color: var(--crimson);
    transition: transform .2s ease;
    flex-shrink: 0;
}

.faq-question[aria-expanded="true"] .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 4px 22px;
}

.faq-answer p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gray-700);
    max-width: 65ch;
}

/* ==========================================================
   SHOWCASE LAYOUT UPDATE — FILLS THE EMPTY LOWER-LEFT AREA
   Asset Security sits below Live Fleet View while the charts
   remain stacked on the right.
   ========================================================== */

.showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 22px;
    align-items: stretch;
}

.showcase-visual {
    grid-column: 1;
    grid-row: 1;
}

.asset-security-card {
    grid-column: 1;
    grid-row: 2;

    background: var(--white);
    border: 1px solid var(--gray-150);
    border-radius: var(--radius-lg);
    padding: 24px;
    min-height: 230px;

    box-shadow: 0 20px 44px -28px rgba(21, 17, 26, .22);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: transform .2s ease, box-shadow .2s ease;
}

.asset-security-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px -24px rgba(21, 17, 26, .30);
}

.showcase-charts {
    grid-column: 2;
    grid-row: 1 / span 2;

    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Asset Security header */
.asset-security-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.asset-security-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--crimson);
    margin-bottom: 5px;
}

.asset-security-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--ink);
}

/* Live indicator */
.asset-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: var(--radius-pill);
    background: #E6F3E8;
    color: #2F7A3D;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
}

.asset-live span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2F7A3D;
}

/* Security summary + status list */
.asset-security-main {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.asset-lock-visual {
    min-height: 115px;
    border: 1px solid var(--gray-150);
    border-radius: var(--radius-md);
    background: radial-gradient(circle at center, var(--crimson-tint) 0%, transparent 68%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.asset-lock-ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--crimson);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    box-shadow: 0 8px 18px -8px rgba(203, 41, 82, .55);
}

.asset-lock-ring i {
    font-size: 18px;
}

.asset-lock-visual strong {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    color: var(--ink);
}

.asset-lock-visual span {
    font-size: 10px;
    color: var(--gray-500);
}

.asset-status-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asset-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid var(--gray-150);
    border-radius: var(--radius-sm);
    background: var(--bg-alt);
}

.asset-status-row strong {
    display: block;
    font-size: 12px;
    color: var(--ink);
}

.asset-status-row small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--gray-500);
}

.asset-status {
    flex-shrink: 0;
    padding: 4px 7px;
    border-radius: var(--radius-pill);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 700;
}

.asset-status.secured {
    background: #E6F3E8;
    color: #2F7A3D;
}

.asset-status.alert {
    background: var(--crimson-tint);
    color: var(--crimson-dark);
}

/* Asset Security footer */
.asset-security-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-150);
    font-size: 11px;
    color: var(--gray-500);
}

.asset-security-footer span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.asset-security-footer i {
    color: var(--crimson);
}

.asset-security-footer a {
    color: var(--crimson);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.asset-security-footer a:hover {
    color: var(--crimson-dark);
}

/* Responsive showcase */
@media (max-width:900px) {
    .showcase-grid {
        grid-template-columns: 1fr;
    }

    .showcase-visual,
    .asset-security-card,
    .showcase-charts {
        grid-column: 1;
        grid-row: auto;
    }

    .showcase-charts {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width:620px) {
    .asset-security-main {
        grid-template-columns: 1fr;
    }

    .asset-lock-visual {
        min-height: 100px;
    }

    .asset-security-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}