/* ==========================================================================
   Home page — additions on top of home.css
   Markup: resources/views/welcome.blade.php  ·  Copy: config/home_content.php
   Loaded by layouts/home.blade.php after home.css and home-responsive.css.
   Covers: hero stat card, services pillar board (tab icons, accent badge),
   call-to-action band, and small spacing fixes for the new content.
   Colours, fonts, radii and spacing come from the shared tokens in colors.css / global.css.
   ========================================================================== */

/* --- Hero: stat card over the photo ---------------------------------------- */

.ax-hero__stat {
    position: absolute;
    left: -6px;
    bottom: 28px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 22px;
    background: var(--ax-white);
    border-radius: var(--ax-r-md);
    box-shadow: var(--ax-e4);
}
.ax-hero__stat strong {
    font-family: var(--ax-font-display);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    background: var(--ax-grad-ink);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ax-hero__stat span {
    font-family: var(--ax-font-sans);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ax-ink-soft);
}

/* --- Headings: show the copy exactly as written ------------------------------------
   Legacy theme rules capitalise every word of these headings ("Welcome To ACCUREX"). */

.h-about-block .right h2,
.testimonial2 .hadding2-w h3,
.ax-cta__title,
.faqblock_home .title h3,
.faqblock_home .accordion-button { text-transform: none !important; }

/* --- Trusted by: the heading now opens the section on its own ---------------- */

.ax-clients__title { margin-bottom: 14px; }

/* --- Services pillar board --------------------------------------------------- */

/* Icon before each pillar name in the rail */
.ax-svc__tab > span { display: inline-flex; align-items: center; min-width: 0; }
.ax-svc__tabicon {
    flex: 0 0 22px;
    width: 22px;
    margin-right: 12px;
    font-size: 15px;
    text-align: center;
    opacity: .75;
    transition: opacity var(--ax-dur-md) var(--ax-ease);
}
/* The rail's generic `.ax-svc__tab i` rule hides arrows until hover; keep the pillar icon always visible. */
.ax-svc__tab .ax-svc__tabicon { transform: none; opacity: .75; }
.ax-svc__tab:hover .ax-svc__tabicon,
.ax-svc__tab.is-active .ax-svc__tabicon { opacity: 1; }

/* One accent per pillar (the shared --ax-val-* tokens) */
.ax-svc__panel--blue   { --ax-tone: var(--ax-val-blue); }
.ax-svc__panel--teal   { --ax-tone: var(--ax-val-teal); }
.ax-svc__panel--purple { --ax-tone: var(--ax-val-purple); }
.ax-svc__panel--orange { --ax-tone: var(--ax-val-orange); }
.ax-svc__panel--red    { --ax-tone: var(--ax-val-red); }
.ax-svc__panel--indigo { --ax-tone: var(--ax-val-indigo); }
.ax-svc__panel--green  { --ax-tone: var(--ax-val-green); }

.ax-svc__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    font-size: 22px;
    color: var(--ax-tone, var(--ax-blue-500));
    background: color-mix(in srgb, var(--ax-tone, var(--ax-blue-500)) 13%, var(--ax-white));
    border-radius: 50%;
}

/* Two-column checklist when a pillar has several items */
.ax-svc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }

/* --- Call to action band ------------------------------------------------------ */

.ax-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--ax-sp-section) 0;
    background: linear-gradient(120deg, var(--ax-navy-900) 0%, var(--ax-navy-800) 52%, var(--ax-navy-600) 100%);
}
.ax-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(520px 320px at 88% 12%, color-mix(in srgb, var(--ax-cyan-500) 26%, transparent), transparent 70%),
        radial-gradient(420px 280px at 6% 100%, color-mix(in srgb, var(--ax-blue-500) 28%, transparent), transparent 70%);
}
.ax-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: 48px;
}
.ax-cta__copy { max-width: 720px; }
.ax-cta__title {
    margin: 0 0 16px;
    font-family: var(--ax-font-display);
    font-size: var(--ax-t-display);
    font-weight: 800;
    line-height: var(--ax-lh-tight, 1.12);
    letter-spacing: -.03em;
    color: var(--ax-white);
}
.ax-cta__title .after2 {
    display: inline;
    background: linear-gradient(100deg, var(--ax-cyan-300), var(--ax-blue-400));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.ax-cta__text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: color-mix(in srgb, var(--ax-white) 82%, transparent);
}
.ax-cta__btn { margin-top: 28px; white-space: nowrap; }

/* Enquiry card (kept from the previous Home page): frosted panel on the dark band */
/* The wrapper keeps the legacy class name so the card's own rules apply, minus its dark backdrop. */
.ax-cta__enquire.h-contact-block { padding: 0; background: transparent !important; }
.ax-cta__enquire .right-enquire-now {
    padding: 34px 32px;
    border-radius: var(--ax-r-lg);
    background: color-mix(in srgb, var(--ax-white) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--ax-white) 16%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: none;
}
.ax-cta__enquire .right-enquire-now .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
}
.ax-cta__enquire .right-enquire-now .item .ax-enq__copy { width: 100%; }
.ax-cta__enquire .right-enquire-now .social-icon { padding: 24px 0 0; }
.ax-cta__enquire .right-enquire-now .social-icon ul { flex-wrap: wrap; row-gap: 6px; }
.ax-cta__enquire .right-enquire-now .social-icon li { padding: 0 8px 0 0; }
.ax-cta__enquire .right-enquire-now h3 { padding-top: 0; font-size: 1.5rem !important; line-height: 1.25 !important; text-transform: none; }
.ax-cta__enquire .ax-enq__text { margin: 10px 0 22px; line-height: 1.7; }
.ax-cta__enquire .button { padding: 0; }

/* --- FAQ: the question is a button now, keep the row padding consistent ------- */

.faqblock_home .accordion-header { margin: 0; }
.faqblock_home .accordion-button { text-align: left; width: 100%; }

/* --- Tablet and below ----------------------------------------------------------- */

@media (max-width: 991px) {
    .ax-hero__stat { left: 10px; bottom: 16px; padding: 10px 16px; }
    .ax-hero__stat strong { font-size: 1.5rem; }
    .ax-svc__list { grid-template-columns: minmax(0, 1fr); }
    .ax-cta__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 575px) {
    .ax-hero__stat { padding: 8px 14px; border-radius: var(--ax-r-sm); }
    .ax-hero__stat strong { font-size: 1.3rem; }
    .ax-hero__stat span { font-size: .68rem; }
    .ax-cta__btn { width: 100%; justify-content: center; }
    .ax-cta__enquire .right-enquire-now { padding: 28px 22px; }
    .ax-svc__badge { width: 50px; height: 50px; font-size: 19px; margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .ax-svc__tabicon { transition: none; }
}