/* excire.com — homepage sections.
 * All values measured on the live page (viewport 1280): section heights,
 * margins, element widths and colors. Live uses negative margins to overlap
 * sections; reproduced here 1:1.
 */

/* Shared section helpers */
.section--grey  { background: #ebebeb; }
.section--black { background: #000; color: #fff; }
.section__title { font-size: var(--fs-h2); font-weight: var(--fw-bold); margin: 0 0 var(--space-3); }
.section__title--center { text-align: center; }
.section__lead { font-size: var(--fs-base); color: var(--color-text); max-width: 60ch; }
.section__lead--center { margin-inline: auto; text-align: center; }

/* ---------- 1) Hero slider (900px, photo background, left-aligned text) ---------- */
.hero { position: relative; background: #000; color: #fff; overflow: hidden; }
/* Viewport doubles as the sliding track: all slides in a row, translated on change */
.hero__viewport { position: relative; display: flex; transition: transform .6s ease; will-change: transform; }
.hero__slide {
    flex: 0 0 100%;
    min-height: 900px;                    /* measured */
    background-size: cover;
    background-position: center;
    display: flex; align-items: center;   /* vertically centre content */
}
.hero__inner { width: 100%; padding-block: 60px; }
.hero__text { max-width: 100%; }   /* full content width, like other sections */
.hero__title { font-size: var(--fs-h1); font-weight: 700; margin: 0 0 var(--space-4); }  /* bold, color per slide */
.hero__subtitle { font-size: var(--fs-h3); font-weight: 400; line-height: 2.5rem; color: #fff; margin: 0; }
/* Screenshot: equal spacing above (text) and below (buttons) */
.hero__media { position: relative; display: block; width: fit-content; margin: var(--space-5) 0; }
.hero__product { width: 620px; max-width: 100%; height: auto; display: block; }  /* larger screenshot */
.hero__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
              background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.hero__play:hover circle { fill: rgba(0,0,0,.72); }
.hero__cta { display: flex; flex-wrap: nowrap; gap: 14px; }

/* Hero + product buttons: blue gradients (measured) */
.btn--hero, .product__cta .btn {
    width: 310px;                          /* measured */
    max-width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-button);
    font-size: 20px;                   /* uniform button text size site-wide */
    font-weight: 400;
    padding: 12px 24px;
    color: #fff;
    background: linear-gradient(135deg, #1B67E6 0%, #00ACFF 100%);
}
.btn--hero:hover, .product__cta .btn:hover { color: #fff; background: linear-gradient(135deg, #00ACFF 0%, #1B67E6 100%); }
.btn--hero + .btn--hero, .product__cta .btn--ghost { background: #00ACFF; box-shadow: none; }
.btn--hero + .btn--hero:hover, .product__cta .btn--ghost:hover { background: #1B67E6; color: #fff; }

.hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid #d5d8dc; cursor: pointer; color: #d5d8dc;
}
.hero__arrow:hover { background: rgba(213,216,220,.15); }
.hero__arrow--prev { left: 20px; }
.hero__arrow--next { right: 20px; }
/* 2nd slide (Search): the woman sits on the far right of the photo — shift the
   image so she stays in frame instead of being cropped by the centred position. */
.hero__slide:nth-child(2) { background-position: right center; }
.hero__dots { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.hero__dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; }
.hero__dot.is-active { background: #fff; }

/* Hero video lightbox */
.hvideo { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hvideo[hidden] { display: none; }
.hvideo__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.8); }
.hvideo__dialog { position: relative; z-index: 1; width: 100%; max-width: 960px; }
.hvideo__frame { position: relative; padding-top: 56.25%; background: #000; }
.hvideo__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hvideo__close { position: absolute; top: -44px; right: 0; background: none; border: 0; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; }

/* ---------- 2/3) Awards title + press logos ---------- */
.awards { margin-top: 50px; }                       /* measured */
.awards .container { padding-block: 0; }
.awards__title { text-align: center; font-size: var(--fs-base); font-weight: var(--fw-medium); margin: 0 0 20px; }
.awards__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); }
.awards__logos img { height: 97px; width: auto; object-fit: contain; }   /* measured 151x97 */
.awards__logos--mob { display: none; }   /* desktop shows the 7-logo row */

/* ---------- 5) Feature intro (grey, flows into the carousel) ---------- */
.feature-intro { margin-top: 60px; text-align: center; }   /* measured */
.feature-intro .container { padding-bottom: 0; }
.feature-intro .section__lead { margin-inline: auto; text-align: center; font-size: var(--fs-h3); line-height: 2.5rem; max-width: none; }  /* full content width, like live */
.trustpilot-widget { margin: 0; }
.feature-intro .trustpilot-widget { margin-top: 50px; }   /* space to the text above (like live) */
.products__trustpilot { margin-bottom: var(--space-3); }

/* Static rating badge — shown when the live Trustpilot widget isn't loaded
   (e.g. consent declined). Trustpilot's script replaces it once consent is given. */
.tp-static { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-size: 15px; line-height: 1; }
.tp-static:hover .tp-static__label { text-decoration: underline; }
.tp-static__stars { position: relative; display: inline-block; font-size: 18px; line-height: 1; white-space: nowrap; }
.tp-static__stars::before { content: "★★★★★"; letter-spacing: 2px; color: #dcdce6; }
.tp-static__fill { position: absolute; top: 0; left: 0; width: 92%; overflow: hidden; white-space: nowrap; }   /* 4.6 / 5 = 92% */
.tp-static__fill::before { content: "★★★★★"; letter-spacing: 2px; color: #00b67a; }
.tp-static__label { color: inherit; }
.tp-static__label strong { color: #00b67a; font-weight: 700; }

/* ---------- 6) Feature peek carousel (centered slide + peeking neighbours) ---------- */
.features { padding-block: 40px 86px; }   /* space between Trustpilot and slider (like live) */
.features__stage { position: relative; }
.features__track {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    overflow-x: auto;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* old Edge */
}
.features__track::-webkit-scrollbar { display: none; }   /* WebKit */
.feature-card {
    flex: 0 0 auto;
    width: 600px;
    max-width: 76vw;
    text-align: left;
    opacity: .55;
    transition: opacity .35s ease;
}
.feature-card.is-active { opacity: 1; }
.feature-card__img { width: 100%; height: auto; aspect-ratio: 83 / 53; display: block; margin: 0; }
.feature-card__title { font-size: 32px; font-weight: var(--fw-bold); color: #000; margin: var(--space-3) 0 var(--space-3); }
.feature-card__body { display: none; }               /* text only on the centered slide */
.feature-card.is-active .feature-card__body { display: block; }
.feature-card__text { margin-bottom: var(--space-2); }
.feature-card__more a, .feature-card__more a strong { color: #000; }

/* Arrows: white chevron on a black square, overlaid on the image row */
.features__arrow {
    position: absolute; top: 160px; z-index: 5;
    width: 46px; height: 46px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #000; color: #fff; border: 0; cursor: pointer;
}
.features__arrow:hover { background: #1a1a1a; }
.features__arrow--prev { left: 16px; }
.features__arrow--next { right: 16px; }

/* ---------- 7) Full-width photo band (820px, overlapped by products) ---------- */
.imageband { height: 820px; margin-top: 120px; background-size: cover; background-position: center; }

/* ---------- 8) Products (pulled 170px over the photo band) ---------- */
.products { position: relative; margin-top: -180px; background: transparent; }   /* overlap like excire office */
.products > .container { background: #fff; }   /* white box overlapping the image band (like other pages) */
.products__list { display: flex; flex-direction: column; gap: 100px; margin-top: var(--space-7); }
.product + .product { border-top: 1px solid #000; padding-top: 100px; }
.product { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
.product--reverse .product__media { order: 2; }
.product__media img { width: 100%; height: auto; }
.product__name { font-size: var(--fs-h2); font-weight: var(--fw-medium); margin-bottom: var(--space-2); }
.product__tagline { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 1.2; color: var(--color-text); margin-bottom: var(--space-3); }
/* Responsive tagline swap (matches live): the mobile variant only shows on phones. */
.product__tagline--mob { display: none; }
.product__text { margin-bottom: var(--space-4); }
.product__cta { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 10) Recommendation banner (black, 312px) ---------- */
.recommend { margin-top: 100px; text-align: center; }        /* measured */
.recommend__title { color: #fff; font-size: var(--fs-h2); max-width: 24ch; margin-inline: auto; }

/* ---------- 13) Customer quotes slider (full-bleed photo + swipe track) ---------- */
.hquotes { position: relative; overflow: hidden; }
.hquotes__track { display: flex; transition: transform .6s ease; will-change: transform; }
.hquote { flex: 0 0 100%; margin: 0; min-height: 720px; background-size: cover; background-position: center;
          display: flex; align-items: center; justify-content: center; padding-inline: 60px; }
/* Transparent box — smaller side gaps, more see-through */
.hquote__card { width: 100%; max-width: 1160px; background: rgba(255,255,255,.7); padding: 36px 40px; text-align: center; }
.hquote__text { font-size: var(--fs-h3); line-height: 1.5; color: #000; font-style: normal; margin: 0 auto; max-width: 760px; }
.hquote__credit { margin-top: var(--space-3); font-size: 14px; color: #000; }
/* Blue double-chevron images: » above the quote (next), « below the credit (prev) */
.hquote__chev { display: block; margin-inline: auto; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.hquote__chev img { display: block; height: auto; width: 64px; }
.hquote__chev--next { margin-bottom: var(--space-4); }
.hquote__chev--prev { margin-top: var(--space-4); }
/* Slider nav arrows in rectangles, beside the box */
.hquotes__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
                width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
                background: #000; border: 0; cursor: pointer; color: #fff; }
.hquotes__nav:hover { background: #1a1a1a; }
.hquotes__nav--prev { left: 22px; }
.hquotes__nav--next { right: 22px; }

/* ---------- 14) Stats (radial grey gradient, white icons + labels) ---------- */
.stats { background: radial-gradient(at center center, #CACACA 0%, #707070 100%); color: #fff; }
.stats .section__title { color: #fff; font-weight: var(--fw-medium); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-5); }
.stat { text-align: center; }
.stat__icon svg { display: inline-block; width: 52px; height: 52px; }   /* match product-page icon size */
.stat__label { font-size: 30px; font-weight: 400; color: #fff; margin: var(--space-3) 0 0; line-height: 1.3; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .hero__text { padding-left: 0; }
}
@media (max-width: 900px) {
    /* Subjects sit on the right of every hero photo — shift the crop so they
       stay in frame on the narrow mobile slide instead of centring on empty space. */
    .hero__slide { min-height: 0; background-position: right center; }
    /* Hero type much smaller on phones (desktop 62px is far too big here), and
       bold on mobile like live. */
    .hero__title { font-size: clamp(30px, 7vw, 46px); font-weight: 700; }
    .hero__subtitle { font-size: clamp(18px, 4.5vw, 24px); line-height: 1.45; }
    .hero__inner { padding-block: var(--space-6) var(--space-7); }
    .hero__media { width: 100%; }
    .hero__product { width: 100%; }
    .hero__subtitle br { display: none; }   /* let the subtitle wrap naturally on mobile */
    .hero__cta { flex-direction: column; }
    .btn--hero, .product__cta .btn { width: 100%; }
    .feature-card { max-width: 82vw; }
    .features__arrow--prev { left: 6px; }
    .features__arrow--next { right: 6px; }
    .hquote { padding-inline: 16px; min-height: 0; padding-block: 56px; }
    .hquote__card { padding: 24px 18px; }
    .hquotes__nav { display: none; }   /* chevron images handle nav on small screens */
    .imageband { height: 260px; margin-top: var(--space-6); }
    .products { margin-top: 0; }
    .product, .product--reverse { grid-template-columns: 1fr; }
    .product__tagline--desk { display: none; }
    .product__tagline--mob { display: block; }
    .product--reverse .product__media, .product__media { order: -1; }
    .stats__grid { grid-template-columns: 1fr; }
    /* Mobile: hide the 7-logo desktop row, show the 4-logo mobile row stacked.
       Stacked one-per-row, so the logos can be a bit larger. */
    .awards__logos--desk { display: none; }
    .awards__logos--mob { display: flex; flex-direction: column; gap: var(--space-5); }
    .awards__logos--mob img { height: 90px; }
}