/* ============================================================
   RUI AERO LTD - PROFESSIONAL HOME PAGE POLISH PATCH
   File: css/home.css

   Purpose:
   Upgrades the Phase 1 home page from a simple layout into a
   more polished aerospace supplier landing page.

   Key improvements:
   - Stronger hero section
   - Clear RFQ calls to action
   - Credibility/trust section
   - Premium services/systems/tools cards
   - RFQ process section
   - Final conversion CTA before the footer
============================================================ */

.home-page {
    min-height: 100vh;
    overflow: hidden;
    background: var(--rui-white);
    color: var(--rui-navy);
}

.section-inner {
    width: min(var(--max-site-width), calc(100% - 2rem));
    margin: 0 auto;
}

.eyebrow {
    margin-bottom: 0.65rem;
    color: var(--rui-sky);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.eyebrow-dark {
    color: var(--rui-blue-dark);
}

.section-header {
    max-width: 720px;
    margin: 0 auto clamp(1.8rem, 3vw, 2.5rem);
    text-align: center;
}

.section-header-left {
    max-width: 760px;
    margin-inline: 0;
    text-align: left;
}

.section-header h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.section-header p {
    color: rgba(7, 27, 61, 0.72);
    font-size: clamp(0.96rem, 1.45vw, 1.05rem);
}

/* =========================
   BUTTONS
========================= */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.78rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 800;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
    outline: none;
}

.button-primary {
    background: var(--rui-sky);
    color: var(--rui-white);
    box-shadow: 0 14px 28px rgba(27, 141, 224, 0.26);
}

.button-primary:hover,
.button-primary:focus-visible {
    background: var(--rui-blue-dark);
}

.button-secondary {
    border-color: rgba(255, 255, 255, 0.32);
    color: var(--rui-white);
    background: rgba(255, 255, 255, 0.08);
}

.button-secondary:hover,
.button-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
}

/* =========================
   HERO
========================= */
.hero-section {
    position: relative;
    isolation: isolate;
    padding: clamp(4rem, 7vw, 7rem) 0 clamp(4rem, 7vw, 6.5rem);
    color: var(--rui-white);
    background:
        radial-gradient(circle at 15% 20%, rgba(81, 155, 231, 0.34), transparent 20rem),
        radial-gradient(circle at 84% 22%, rgba(255, 255, 255, 0.12), transparent 18rem),
        linear-gradient(135deg, #071b3d 0%, #0b2f60 48%, #4d88d4 100%);
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.15;
    background-image:
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 85%);
}

.hero-section::after {
    content: "";
    position: absolute;
    right: -5rem;
    bottom: -7rem;
    z-index: -1;
    width: min(48vw, 560px);
    aspect-ratio: 1;
    background: url("../assets/images/rui-hero-globe-overlay.png") no-repeat center / contain;
    opacity: 0.92;
    pointer-events: none;
}

.hero-inner {
    width: min(var(--max-site-width), calc(100% - 2rem));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.72fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.hero-copy h1 {
    max-width: 780px;
    margin-bottom: 1.1rem;
    font-size: clamp(2.35rem, 5.6vw, 4.65rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.hero-lead {
    max-width: 690px;
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1rem, 1.7vw, 1.22rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.65rem;
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.55rem;
}

.trust-badges span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.85rem;
}

.hero-panel {
    padding: clamp(1.25rem, 3vw, 1.7rem);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
}

.hero-panel h2 {
    margin-bottom: 0.9rem;
    font-size: clamp(1.25rem, 2vw, 1.55rem);
}

.why-list {
    display: grid;
    gap: 0.7rem;
}

.why-list li {
    position: relative;
    padding-left: 1.7rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.96rem;
}

.why-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.27rem;
    width: 0.8rem;
    height: 0.8rem;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: var(--rui-sky);
    box-shadow: 0 0 0 4px rgba(27, 141, 224, 0.22);
}

/* =========================
   CREDIBILITY
========================= */
.credibility-section {
    padding: clamp(3rem, 6vw, 5.2rem) 0;
    background: var(--rui-off-white);
}

.credibility-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.credibility-card {
    min-height: 210px;
    padding: 1.25rem;
    border: 1px solid rgba(7, 27, 61, 0.09);
    border-radius: 22px;
    background: var(--rui-white);
    box-shadow: 0 18px 45px rgba(7, 27, 61, 0.08);
}

.credibility-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: rgba(27, 141, 224, 0.12);
    color: var(--rui-blue-dark);
    font-size: 1.2rem;
}

.credibility-card h3 {
    margin-bottom: 0.45rem;
    font-size: 1.05rem;
}

.credibility-card p {
    color: rgba(7, 27, 61, 0.68);
    font-size: 0.92rem;
}

/* =========================
   CAPABILITY SECTIONS
========================= */
.capability-section {
    padding: clamp(3.2rem, 6vw, 5.3rem) 0;
    color: var(--rui-white);
    background: #102633;
}

.capability-section-alt {
    background:
        radial-gradient(circle at 16% 15%, rgba(77, 136, 212, 0.16), transparent 22rem),
        #142d3a;
}

.capability-section .section-header p {
    color: rgba(255, 255, 255, 0.78);
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.capability-card {
    position: relative;
    min-height: 220px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.65rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045)),
        rgba(255, 255, 255, 0.04);
    color: var(--rui-white);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.capability-card::after {
    content: "";
    position: absolute;
    right: -52px;
    bottom: -52px;
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: rgba(77, 136, 212, 0.18);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.capability-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--rui-sky);
    font-size: 1.35rem;
}

.capability-card h3 {
    max-width: 94%;
    font-size: clamp(1.05rem, 1.7vw, 1.22rem);
    line-height: 1.2;
    font-weight: 800;
}

.capability-card p {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.92rem;
    line-height: 1.35;
}

.capability-card span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.86rem;
    font-weight: 800;
}

.capability-card:hover,
.capability-card:focus-visible {
    transform: translateY(-5px);
    border-color: rgba(77, 136, 212, 0.55);
    background:
        linear-gradient(145deg, rgba(77, 136, 212, 0.22), rgba(255, 255, 255, 0.06)),
        rgba(255, 255, 255, 0.04);
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.2);
    outline: none;
}

.capability-card:hover::after,
.capability-card:focus-visible::after {
    transform: scale(1.12);
    opacity: 0.9;
}

.capability-grid-seven .capability-card:nth-child(7) {
    grid-column: 2 / span 1;
}

/* =========================
   RFQ PROCESS
========================= */
.rfq-process-section {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--rui-white);
}

.rfq-process-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.rfq-process-inner h2 {
    margin-bottom: 0.8rem;
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.rfq-process-inner p {
    color: rgba(7, 27, 61, 0.7);
}

.process-list {
    counter-reset: process;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    list-style: none;
}

.process-list li {
    min-height: 118px;
    padding: 1.1rem;
    border: 1px solid rgba(7, 27, 61, 0.08);
    border-radius: 20px;
    background: var(--rui-off-white);
    color: var(--rui-navy);
    font-weight: 800;
    box-shadow: 0 16px 36px rgba(7, 27, 61, 0.06);
}

.process-list span {
    display: block;
    margin-bottom: 0.65rem;
    color: var(--rui-blue-dark);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

/* =========================
   FINAL CTA
========================= */
.final-cta-section {
    padding: 0 1rem clamp(3.5rem, 6vw, 5rem);
    background: var(--rui-white);
}

.final-cta-card {
    width: min(var(--max-site-width), 100%);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-radius: 26px;
    background:
        radial-gradient(circle at 88% 15%, rgba(77, 136, 212, 0.28), transparent 18rem),
        linear-gradient(135deg, var(--rui-navy) 0%, #0c3569 100%);
    color: var(--rui-white);
    box-shadow: 0 24px 60px rgba(7, 27, 61, 0.18);
}

.final-cta-card h2 {
    margin-bottom: 0.55rem;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.final-cta-card p:not(.eyebrow) {
    max-width: 680px;
    color: rgba(255, 255, 255, 0.8);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px) {
    .hero-inner,
    .rfq-process-inner {
        grid-template-columns: 1fr;
    }

    .hero-panel {
        max-width: 720px;
    }

    .credibility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .capability-grid-seven .capability-card:nth-child(7) {
        grid-column: 1 / -1;
        max-width: calc(50% - 0.5rem);
        width: 100%;
        justify-self: center;
    }
}

@media (max-width: 680px) {
    .hero-section {
        padding-top: 3rem;
    }

    .hero-copy h1 {
        font-size: clamp(2.05rem, 12vw, 3.2rem);
    }

    .hero-actions,
    .final-cta-card {
        align-items: stretch;
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .credibility-grid,
    .capability-grid,
    .process-list {
        grid-template-columns: 1fr;
    }

    .capability-grid-seven .capability-card:nth-child(7) {
        max-width: none;
    }

    .capability-card {
        min-height: 185px;
    }

    .section-header-left {
        text-align: center;
    }
}


/* ============================================================
   METALLIC ALUMINIUM UI POLISH PATCH - HOME PAGE
   Purpose:
   Reduces the heavy blue feel by introducing aluminium panels,
   graphite cards, brushed-metal borders and restrained blue accents.
============================================================ */
.home-page {
    background:
        linear-gradient(180deg, #ffffff 0%, var(--rui-off-white) 48%, var(--rui-aluminium-light) 100%);
}

.eyebrow {
    color: var(--rui-blue-dark);
}

.hero-section {
    background:
        radial-gradient(circle at 12% 22%, rgba(230, 232, 234, 0.32), transparent 20rem),
        radial-gradient(circle at 86% 18%, rgba(61, 141, 255, 0.16), transparent 18rem),
        linear-gradient(135deg, var(--rui-navy-deep) 0%, var(--rui-navy) 45%, var(--rui-graphite) 100%);
    border-bottom: 4px solid var(--rui-aluminium);
}

.hero-section::before {
    opacity: 0.12;
    background-image:
        linear-gradient(90deg, rgba(230, 232, 234, 0.18) 1px, transparent 1px),
        linear-gradient(180deg, rgba(230, 232, 234, 0.18) 1px, transparent 1px);
}

.hero-panel,
.trust-badges span {
    border-color: rgba(199, 204, 209, 0.34);
    background: linear-gradient(145deg, rgba(230, 232, 234, 0.16), rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 70px rgba(0,0,0,0.18);
}

.button-primary {
    background: linear-gradient(135deg, var(--rui-blue-dark), var(--rui-sky));
    box-shadow: 0 14px 28px rgba(36, 91, 145, 0.26);
}

.button-secondary {
    border-color: rgba(230, 232, 234, 0.55);
    background: rgba(230, 232, 234, 0.08);
}

.credibility-section {
    background:
        radial-gradient(circle at 12% 12%, rgba(174, 182, 191, 0.22), transparent 20rem),
        linear-gradient(180deg, var(--rui-off-white), var(--rui-aluminium-light));
}

.credibility-card,
.process-list li {
    border-color: rgba(174, 182, 191, 0.45);
    background:
        linear-gradient(145deg, #ffffff 0%, var(--rui-aluminium-light) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 18px 42px rgba(23,35,43,0.1);
}

.credibility-card i {
    background: linear-gradient(145deg, var(--rui-aluminium-light), var(--rui-aluminium));
    color: var(--rui-navy);
    border: 1px solid rgba(174, 182, 191, 0.55);
}

.capability-section {
    background:
        radial-gradient(circle at 16% 15%, rgba(199, 204, 209, 0.15), transparent 22rem),
        linear-gradient(135deg, var(--rui-charcoal) 0%, var(--rui-graphite) 100%);
}

.capability-section-alt {
    background:
        radial-gradient(circle at 78% 10%, rgba(61, 141, 255, 0.11), transparent 22rem),
        linear-gradient(135deg, #22313A 0%, var(--rui-charcoal) 100%);
}

.capability-card {
    border-color: rgba(199, 204, 209, 0.22);
    background:
        linear-gradient(145deg, rgba(230, 232, 234, 0.12), rgba(174, 182, 191, 0.045)),
        rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 22px 45px rgba(0,0,0,0.14);
}

.capability-card::after {
    background: radial-gradient(circle, rgba(199, 204, 209, 0.18), transparent 65%);
}

.capability-card > i {
    background: linear-gradient(145deg, rgba(230,232,234,0.18), rgba(199,204,209,0.08));
    color: var(--rui-aluminium-light);
    border: 1px solid rgba(199,204,209,0.24);
}

.capability-card:hover,
.capability-card:focus-visible {
    border-color: rgba(230, 232, 234, 0.55);
    background:
        linear-gradient(145deg, rgba(230, 232, 234, 0.18), rgba(61, 141, 255, 0.08)),
        rgba(255, 255, 255, 0.045);
}

.rfq-process-section,
.final-cta-section {
    background: linear-gradient(180deg, #ffffff 0%, var(--rui-off-white) 100%);
}

.final-cta-card {
    border: 1px solid rgba(199, 204, 209, 0.3);
    background:
        radial-gradient(circle at 88% 15%, rgba(199, 204, 209, 0.2), transparent 18rem),
        linear-gradient(135deg, var(--rui-navy) 0%, var(--rui-graphite) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 24px 60px rgba(23, 35, 43, 0.22);
}


/* ============================================================
   WHY CHOOSE OPTION 3 PATCH
   Purpose:
   Removes the large floating hero checklist and replaces it with
   a dedicated "Why choose RUI Aero" section below the hero.
   This keeps the hero focused while giving the trust points a more
   professional, card-based layout.
============================================================ */
.hero-inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hero-copy h1,
.hero-lead {
    margin-left: auto;
    margin-right: auto;
}

.hero-actions,
.trust-badges {
    justify-content: center;
}

.why-section {
    position: relative;
    padding: clamp(3.2rem, 6vw, 5.4rem) 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(199, 204, 209, 0.24), transparent 22rem),
        linear-gradient(180deg, #ffffff 0%, var(--rui-off-white) 100%);
    color: var(--rui-navy);
}

.why-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(174, 182, 191, 0.75), transparent);
}

.why-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.why-card {
    min-height: 230px;
    padding: 1.25rem;
    border: 1px solid rgba(174, 182, 191, 0.5);
    border-radius: 22px;
    background:
        linear-gradient(145deg, #ffffff 0%, var(--rui-aluminium-light) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 18px 42px rgba(23, 35, 43, 0.1);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(61, 141, 255, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 24px 52px rgba(23, 35, 43, 0.14);
}

.why-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 1rem;
    border: 1px solid rgba(174, 182, 191, 0.58);
    border-radius: 15px;
    background: linear-gradient(145deg, var(--rui-aluminium-light), var(--rui-aluminium));
    color: var(--rui-navy);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}

.why-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.04rem;
    line-height: 1.2;
    font-weight: 850;
    color: var(--rui-navy);
}

.why-card p {
    color: rgba(7, 27, 61, 0.68);
    font-size: 0.92rem;
    line-height: 1.5;
}

.why-card-wide {
    grid-column: span 2;
}

@media (max-width: 980px) {
    .why-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .why-card-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .hero-inner {
        text-align: left;
    }

    .hero-actions,
    .trust-badges {
        justify-content: flex-start;
    }

    .why-card-grid {
        grid-template-columns: 1fr;
    }

    .why-card,
    .why-card-wide {
        min-height: auto;
        grid-column: auto;
    }
}


/* ============================================================
   HOMEPAGE AIRCRAFT VISUAL ASSETS PATCH
   Purpose:
   Integrates the new visual assets into the homepage in a
   professional way: aircraft hero render, supply confidence
   watermark, and turbine fan support visual.
============================================================ */
.hero-inner {
    width: min(var(--max-site-width), calc(100% - 2rem));
    max-width: var(--max-site-width);
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    text-align: left;
    align-items: center;
}

.hero-copy {
    max-width: 720px;
}

.hero-copy h1,
.hero-lead {
    margin-left: 0;
    margin-right: 0;
}

.hero-actions,
.trust-badges {
    justify-content: flex-start;
}

.hero-visual {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero-aircraft {
    width: min(118%, 1100px);
    max-width: none;
    transform: translateX(10%) translateY(4%);
    opacity: 0.98;
    filter: drop-shadow(0 26px 40px rgba(2, 9, 22, 0.30));
    pointer-events: none;
    user-select: none;
}

.credibility-section {
    position: relative;
    overflow: hidden;
}

.credibility-section .section-inner {
    position: relative;
    z-index: 1;
}

.credibility-section::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 2rem;
    height: calc(100% - 4rem);
    aspect-ratio: 1 / 1;
    background: url("../assets/images/rui-aircraft-line-watermark.png") no-repeat center / contain;
    opacity: 0.12;
    pointer-events: none;
}

.tools-intro-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.75rem;
}

.tools-header {
    margin-bottom: 0;
    max-width: 760px;
}

.tools-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tools-visual img {
    width: 100%;
    max-width: 260px;
    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.18));
    pointer-events: none;
    user-select: none;
}

@media (max-width: 980px) {
    .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-copy {
        max-width: 820px;
        margin-inline: auto;
    }

    .hero-copy h1,
    .hero-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions,
    .trust-badges {
        justify-content: center;
    }

    .hero-visual {
        min-height: auto;
        justify-content: center;
    }

    .hero-aircraft {
        width: min(100%, 860px);
        transform: none;
        margin-top: 0.75rem;
    }

    .tools-intro-row {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .tools-header {
        margin-inline: auto;
        text-align: center;
    }

    .tools-visual img {
        max-width: 210px;
    }
}

@media (max-width: 680px) {
    .hero-inner {
        text-align: left;
    }

    .hero-copy {
        margin-inline: 0;
    }

    .hero-copy h1,
    .hero-lead {
        margin-left: 0;
        margin-right: 0;
    }

    .hero-actions,
    .trust-badges {
        justify-content: flex-start;
    }

    .hero-visual {
        justify-content: flex-start;
    }

    .hero-aircraft {
        width: 100%;
        max-width: 640px;
        margin-top: 0.75rem;
    }

    .credibility-section::after {
        right: -10%;
        top: 2rem;
        height: calc(100% - 4rem);
        opacity: 0.08;
    }

    .tools-intro-row {
        justify-items: start;
        text-align: left;
    }

    .tools-header {
        text-align: left;
        margin-inline: 0;
    }

    .tools-visual {
        justify-content: flex-start;
    }

    .tools-visual img {
        max-width: 185px;
    }
}


/* Globe overlay refinement */
@media (max-width: 980px) {
    .hero-section::after {
        right: -4rem;
        bottom: -6rem;
        width: min(62vw, 500px);
        opacity: 0.88;
    }
}

@media (max-width: 680px) {
    .hero-section::after {
        right: -5rem;
        bottom: -4rem;
        width: min(78vw, 380px);
        opacity: 0.75;
    }
}



/* ============================================================
   WATERMARK STRADDLE PATCH
   Purpose:
   Moves the aircraft line watermark so it straddles the boundary
   between the Why section and the Supply Confidence section,
   while remaining subtle and responsive.
============================================================ */

/* Create the overlap effect from the Why section so the watermark
   can cross into the section below. */
.why-section {
    position: relative;
    overflow: visible;
    z-index: 2;
}

/* Keep section content above the decorative overlay. */
.why-section .section-inner,
.credibility-section .section-inner {
    position: relative;
    z-index: 3;
}

/* Remove the old watermark placement from the Supply Confidence section. */
.credibility-section::after {
    display: none;
}

/* New shared-position watermark anchored to the bottom-right of the
   Why section so it strides across both sections. */
.why-section::after {
    content: "";
    position: absolute;
    right: clamp(1rem, 4vw, 3rem);
    bottom: clamp(-19rem, -18vw, -12rem);
    width: min(43vw, 560px);
    aspect-ratio: 1 / 1;
    background: url("../assets/images/rui-aircraft-line-watermark.png") no-repeat center / contain;
    opacity: 0.14;
    pointer-events: none;
    z-index: 1;
}

/* Ensure the lower section participates in stacking cleanly. */
.credibility-section {
    position: relative;
    z-index: 1;
}

/* Tablet */
@media (max-width: 1100px) {
    .why-section::after {
        right: clamp(0.5rem, 2vw, 2rem);
        bottom: clamp(-15rem, -16vw, -10rem);
        width: min(48vw, 500px);
        opacity: 0.12;
    }
}

/* Mobile */
@media (max-width: 680px) {
    .why-section::after {
        right: -18%;
        bottom: -8.75rem;
        width: min(72vw, 360px);
        opacity: 0.10;
    }
}

/* ============================================================
   WATERMARK + GLOBE REFINEMENT PATCH
   Purpose:
   1) Make the aircraft watermark slightly darker / more visible.
   2) Improve the hero globe overlay by switching to a cleaner
      vector SVG with finer, smoother lines.
============================================================ */

/* Slightly stronger watermark while keeping the approved position */
.why-section::after {
    background-image: url("../assets/images/rui-aircraft-line-watermark.png");
    opacity: 0.18;
}

/* Switch the hero globe to a fine-line vector asset */
.hero-section::after {
    background-image: url("../assets/images/rui-hero-globe-overlay.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.62;
}

@media (max-width: 1100px) {
    .why-section::after {
        opacity: 0.16;
    }

    .hero-section::after {
        opacity: 0.56;
    }
}

@media (max-width: 680px) {
    .why-section::after {
        opacity: 0.13;
    }

    .hero-section::after {
        opacity: 0.48;
    }
}


/* ============================================================
   ANIMATED HERO GLOBE PATCH
   Baseline: 0001_FRONT END_STABLE_310526_0528

   Purpose:
   Replaces the previous static hero globe pseudo-element with a
   live SVG globe. JavaScript draws the rotating latitude/longitude
   lines and subtle continent outlines into the SVG.

   Production note:
   The visitor does not receive controls. Tilt, skew, speed and
   continent opacity are fixed in js/rui-hero-globe.js.
============================================================ */

/* The old static globe was previously applied through .hero-section::after.
   This removes that image so the new live SVG component can take its place. */
.hero-section::after {
    display: none;
}

/* Keep the live globe clipped safely within the hero, just like the old
   decorative SVG/PNG globe. */
.hero-section {
    overflow: hidden;
}

/* Ensure hero content and aircraft stay above the decorative globe. */
.hero-inner {
    position: relative;
    z-index: 2;
}

/* Main animated globe positioning.
   These values intentionally mirror the previous static globe position:
   bottom-right, partially offset outside the hero for a large aerospace
   background-graphic feel. */
.rui-hero-globe {
    position: absolute;
    right: -5rem;
    bottom: -7rem;
    z-index: 1;
    width: min(48vw, 560px);
    aspect-ratio: 1 / 1;
    opacity: 0.72;
    pointer-events: none;
    user-select: none;
}

.rui-hero-globe-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Soft interior glow. This is deliberately subtle so it does not flatten
   the aircraft image or make the hero too busy. */
.rui-hero-globe-glow {
    fill: url("#ruiHeroGlobeGlow");
    opacity: 0.22;
}

/* Outer circle of the globe. */
.rui-hero-globe-outer {
    fill: none;
    stroke: rgba(235, 245, 255, 0.38);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

/* Latitude and longitude lines. vector-effect prevents line thickness from
   scaling too heavily across desktop/tablet/mobile sizes. */
.rui-hero-globe-line {
    fill: none;
    stroke: rgba(235, 245, 255, 0.78);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}

.rui-hero-globe-line.back {
    opacity: 0.28;
}

.rui-hero-globe-line.front {
    opacity: 0.82;
}

.rui-hero-globe-line.equator {
    stroke-width: 1.28;
    opacity: 0.74;
}

/* Subtle continent outlines. These remain intentionally faint so they support
   the global/aerospace impression without turning the hero into a busy map. */
.rui-hero-continent-outline {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}

.rui-hero-continent-outline.front {
    stroke: rgba(235, 245, 255, 0.32);
    stroke-width: 1.45;
}

.rui-hero-continent-outline.back {
    stroke: rgba(235, 245, 255, 0.11);
    stroke-width: 1.1;
}

.rui-hero-continent-fill {
    stroke: none;
    fill: rgba(220, 235, 248, 0.045);
}

/* Tablet positioning mirrors the old static globe refinement. */
@media (max-width: 980px) {
    .rui-hero-globe {
        right: -4rem;
        bottom: -6rem;
        width: min(62vw, 500px);
        opacity: 0.62;
    }
}

/* Mobile positioning keeps the globe decorative and less dominant behind
   the stacked hero content. */
@media (max-width: 680px) {
    .rui-hero-globe {
        right: -5rem;
        bottom: -4rem;
        width: min(78vw, 380px);
        opacity: 0.48;
    }
}