/* ── Design Tokens ─────────────────────────────────────────── */ :root { --neutral-darkest: #0b0202; --neutral-darker: #231b1b; --neutral: #858080; --neutral-lighter: #dad9d9; --neutral-lightest: #f2f2f2; --bg-secondary: #f2f2f7; --mobupps-black: #141414; --white: #ffffff; --persian-blue-lightest: #e9e9fb; --persian-blue-lighter: #d4d3f7; --persian-blue-light: #6a66e4; --yellow-lightest: #fef9e9; --yellow-lighter: #fdf3d3; --yellow: #f9c426; --red-lightest: #fce9e8; --red-lighter: #f9d3d2; --red-light: #ec6663; --red: #da4144; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 32px; --shadow-card: 0px 32px 64px 0px rgba(0,0,0,0.14); --shadow-hero: 0px 23px 132.287px -14px rgba(14,16,30,0.66); /* font sizes */ --fs-headline-md: clamp(32px, 3vw, 45px); --fs-headline-sm: clamp(28px, 2.8vw, 40px); --fs-title-lg: 36px; --fs-title-sm: clamp(22px, 2vw, 28px); --fs-body-lg: 22px; --fs-body-md: clamp(15px, 1.25vw, 18px); --fs-body-sm: 16px; --fs-body-xs: 14px; --fs-label-sm: 12px; --max-w: 1296px; --side-pad: clamp(16px, 7.14vw, 108px); } @font-face{ font-family: PoppinsRegular; src: url('/fonts/Poppins/Poppins-Regular.ttf') format('truetype'); } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Restore html overflow-x to visible: global-2026.css sets it to `clip`, which makes html the nearest scroll container and breaks the position:sticky stacking cards in .cap-stack. */ html { scroll-behavior: smooth; overflow-x: visible; } body { font-family: 'PoppinsRegular', sans-serif; font-weight: 400; color: var(--mobupps-black); /* `clip` (not `hidden`) clips the wide hero/CTA gradients horizontally WITHOUT making a scroll container. `overflow-x: hidden` forces overflow-y to compute to `auto` (CSS spec), which turned into a scroller that counted the footer-blob's 30px overhang as extra height — an empty band below the footer on very wide / zoomed-out screens. `clip` keeps overflow-y `visible`, so no band. */ background: #fff; overflow-x: clip; } img { display: block; max-width: 100%; } button, input, select, textarea { font-family: inherit; } a { text-decoration: none; color: inherit; } /* ── Layout helpers ─────────────────────────────────────────── */ .container { width: 100%; max-width: calc(var(--max-w) + var(--side-pad) * 2); margin: 0 auto; padding-left: var(--side-pad); padding-right: var(--side-pad); } /* ═══════════════════════════════════════════════════════════ ENQUIRE MORE BUTTON — animated ═══════════════════════════════════════════════════════════ */ /* Matches the home-2026 .btn.btn--dark hero CTA exactly (text-only, compact, subtle background hover — no arrow animation). */ .btn-enquire { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-family: var(--font-family-body); font-weight: 500; font-size: var(--fs-body-extra-small); line-height: 20px; padding: 8px 16px; border: 0; border-radius: var(--radius-sm); background: var(--color-btn-primary-bg); color: var(--color-btn-primary-fg); cursor: pointer; transition: background-color 0.15s ease; } .btn-enquire:hover { background: var(--color-btn-primary-bg-hover); } /* Small "Enquire more" button (no animation — in description) */ .btn-enquire-sm { display: inline-flex; align-items: center; justify-content: center; background: var(--neutral-darkest); color: #fff; border: none; border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--fs-body-sm); cursor: pointer; white-space: nowrap; transition: opacity 0.2s; } .btn-enquire-sm:hover { opacity: 0.85; } /* ═══════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════ */ .hero { position: relative; overflow: hidden; min-height: 1500px; padding-top: 115px; } .hero-bg { position: absolute; /* Centre the static gradient horizontally so the centred white Echo AI logo always sits over the gradient's coloured core. Fixes very wide / zoomed-out screens where the old left-pinned bg drifted off-centre and the white logo washed out over the light edge. */ top: -653px; left: 50%; transform: translateX(-50%); width: 1694.94px; height: 1450.919px; pointer-events: none; z-index: 0; } .hero-bg img { width: 100%; height: 100%; } .hero-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-logo-wrap { margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 17px; } .hero-logo-img { display: inline-block; } .hero-logo-img img { height: 164.858px; width: auto; display: block; } .hero-powered { font-size: 28px; font-weight: 400; color: #fff; } .hero-tagline { margin-top: 54px; font-size: var(--fs-headline-md); font-weight: 300; color: var(--neutral-darker); text-align: center; white-space: nowrap; } .hero-cta-wrap { margin-top: 45px; } .hero-dashboard { margin-top: 82px; width: 100%; max-width: var(--max-w); position: relative; border-radius: 20px; box-shadow: var(--shadow-hero); overflow: hidden; aspect-ratio: 1296/597; } #hero-dashboard-video { width: 100%; } .hero-dashboard img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; } /* Glass description card */ .hero-desc-card { margin-top: -77px; margin-left: 110px; align-self: flex-start; width: 636px; max-width: 90%; padding: 35px 59px; border-radius: var(--radius-md); backdrop-filter: blur(18.2px); background: linear-gradient(136.78deg, rgba(43,37,217,0.51) 30.59%, rgba(242,66,136,0.51) 125.66%); box-shadow: var(--shadow-card); position: relative; z-index: 2; } .hero-desc-card p { font-size: 28px; font-weight: 400; color: #fff; line-height: 1.5 ; font-family: 'PoppinsRegular'; text-align: left; letter-spacing: 0.5%; } /* Description text below */ .hero-desc-text { margin-top: 42px; margin-bottom: 80px; margin-left: 110px; width: 636px; max-width: 90%; text-align: left; align-self: flex-start; } .hero-desc-text p { font-family: ; font-size: var(--fs-body-md); font-weight: 400; color: var(--mobupps-black); line-height: 1.6; margin-bottom: 12px; } /* ═══════════════════════════════════════════════════════════ STATS ═══════════════════════════════════════════════════════════ */ .stats-section { padding: 80px 0; } .stats-heading { font-size: var(--fs-headline-sm); font-weight: 400; color: #000; margin-bottom: 43px; line-height: 1.2; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .stat-card { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; min-height: 193px; } .stat-card.fintech { background: var(--persian-blue-lightest); } .stat-card.ecommerce { background: var(--yellow-lightest); } .stat-card.edtech { background: var(--red-lightest); } .stat-card.healthcare{ background: var(--neutral-lightest); } .stat-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .stat-value { font-size: var(--fs-title-lg); font-weight: 600; color: var(--mobupps-black); letter-spacing: -0.36px; line-height: 1.2; } .stat-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; padding: 4px 8px; } .stat-badge span { font-size: var(--fs-body-xs); font-weight: 400; white-space: nowrap; } .fintech .stat-badge { background: var(--persian-blue-lighter); } .fintech .stat-badge span { color: var(--persian-blue-light); } .ecommerce .stat-badge { background: var(--yellow-lighter); } .ecommerce .stat-badge span { color: var(--yellow); } .edtech .stat-badge { background: var(--red-lighter); } .edtech .stat-badge span { color: var(--red-light); } .healthcare .stat-badge { background: var(--neutral-lighter); } .healthcare .stat-badge span { color: var(--neutral); } .stat-badge img { width: 16px; height: 16px; } .stat-label { padding: 12px; font-size: var(--fs-body-sm); font-weight: 400; color: #000; padding-left: 0px; } /* ═══════════════════════════════════════════════════════════ THE PROBLEM ═══════════════════════════════════════════════════════════ */ .problem-section { padding: 80px 0; } .problem-heading { font-size: 40px; font-weight: 400; color: #000; margin-bottom: 35px; } .problem-cards { display: flex; flex-wrap: wrap; gap: 48px; margin-bottom: 64px; } .problem-card { background: var(--neutral-darker); border-radius: var(--radius-md); padding: 20px; flex: 1 1 380px; max-width: 420px; display: flex; gap: 20px; align-items: center; } .problem-card-icon { width: 64px; height: 64px; background: var(--red); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .problem-card-icon img { width: 32px; height: 32px; } .problem-card span { font-size: var(--fs-body-md); font-weight: 500; color: #fff; line-height: 1.4; } .problem-solution { border-radius: var(--radius-md); background: linear-gradient(165.42deg, #6a66e4 30.59%, #f24288 125.66%); padding: 32px 43px; display: flex; align-items: center; gap: 43px; box-shadow: var(--shadow-card); } .problem-solution-logo { flex-shrink: 0; display: flex; align-items: center; height: 70.803px; } .problem-solution-logo img { height: 70.803px; width: auto; } .problem-solution-text { font-size: var(--fs-title-sm); font-weight: 400; color: #fff; line-height: 1.4; flex: 1; } /* ═══════════════════════════════════════════════════════════ CORE CAPABILITIES — Stacking Cards ═══════════════════════════════════════════════════════════ */ .capabilities-section { padding-top: 80px; padding-bottom: 80px; } .capabilities-heading { font-size: var(--fs-headline-sm); font-weight: 400; color: #000; margin-bottom: 41px; } .cap-stack-outer { position: relative; } .cap-stack { position: relative; padding-bottom: 80px; } .cap-card { position: sticky; top: 90px; width: 100%; max-width: var(--max-w); margin-left: auto; margin-right: auto; margin-bottom: 20px; background: var(--bg-secondary); border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: space-between; padding: 32px; min-height: 343px; transform-origin: top center; will-change: transform; } .cap-card:nth-child(2) { top: 110px; } .cap-card:nth-child(3) { top: 130px; } .cap-card:nth-child(4) { top: 150px; } .cap-card:nth-child(5) { top: 170px; } .cap-card:last-child { min-height: 414px; margin-bottom: 0;} .cap-card-text { width: 477px; max-width: 48%; display: flex; flex-direction: column; gap: 12px; } .cap-card-text h3 { font-size: var(--fs-title-sm); font-weight: 400; color: #000; line-height: 1.3; } .cap-card-text p { font-size: var(--fs-body-md); font-weight: 400; color: #000; line-height: 1.55; } .cap-card-media { width: 653px; max-width: 50%; height: 279px; border-radius: var(--radius-md); overflow: hidden; position: relative; flex-shrink: 0; } .cap-card:last-child .cap-card-media { height: auto; align-self: stretch; display: flex; align-items: center; justify-content: center; } .cap-card-media .media-bg { position: absolute; inset: 0; border-radius: var(--radius-md); } .cap-card-media .media-bg img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .cap-card-media .media-overlay { position: absolute; inset: 0; border-radius: var(--radius-md); } .cap-card-media .media-screenshot { position: absolute; left: calc(50% - 269px); top: 51px; width: 538px; height: 255px; border-radius: var(--radius-sm); box-shadow: 0px 25px 37.7px 10px rgba(18,12,41,0.11); overflow: hidden; } .cap-card-media .media-screenshot img { width: 100%; height: 100%; object-fit: cover; } /* Slide 1: pink */ .cap-card[data-slide="1"] .media-overlay { background: var(--red-lighter); } /* Slide 2: yellow */ .cap-card[data-slide="2"] .media-overlay { background: var(--yellow-lighter); } /* Slide 3: purple */ .cap-card[data-slide="3"] .media-overlay { background: var(--persian-blue-lighter); } /* Slide 4: gray */ .cap-card[data-slide="4"] .media-overlay { background: var(--neutral-lighter); } /* Slide 5: gradient */ .cap-card[data-slide="5"] .cap-card-media { background: linear-gradient(126.72deg, #6a66e4 30.59%, #f24288 125.66%); width: 538px; } .media-overlay { background: var(--red-lighter); } /* Slide 5 — checklist layout */ .cap-checklist { display: flex; flex-direction: column; gap: 10px; margin-top: 0; } .cap-checklist-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; } .cap-checklist-item img { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; } .cap-checklist-item p { font-size: var(--fs-body-md); color: #000; line-height: 1.5; } .cap-logos-card img {padding: 5%;} /* ═══════════════════════════════════════════════════════════ HOW DOES ECHO AI WORK ═══════════════════════════════════════════════════════════ */ .how-section { padding: 80px 0; z-index: 1000; } .how-left { max-width: 709px; } .how-heading { font-size: var(--fs-headline-sm); font-weight: 400; color: #000; line-height: 1.25; margin-bottom: 12px; } .how-subtext { font-size: var(--fs-title-sm); font-weight: 400; color: var(--neutral); line-height: 1.5; margin-bottom: 22px; } .tabs-wrap { display: flex; flex-direction: column; gap: 22px; align-items: center; } .tabs-bar { background: #f2f2f7; border-radius: var(--radius-sm); padding: 8px; display: inline-flex; align-items: center; gap: 2px; } .tab-btn { padding: 4px 8px; border: none; background: transparent; border-radius: 4px; font-size: var(--fs-body-sm); font-weight: 600; color: var(--mobupps-black); cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; min-height: 29px; } .tab-btn.active { background: var(--neutral-darker); color: #fff; box-shadow: 0px 1px 3px rgba(0,0,0,0.1), 0px 1px 2px rgba(0,0,0,0.1); } .tab-panel { display: none; width: 100%; background: var(--bg-secondary); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 32px; align-items: center; justify-content: space-between; gap: 24px; } .tab-panel.active { display: flex; } .tab-content-left { width: 436px; max-width: 45%; display: flex; flex-direction: column; gap: 12px; } .tab-content-left h3 { font-size: var(--fs-title-sm); font-weight: 400; color: #000; line-height: 1.3; } .tab-feature-list { display: flex; flex-direction: column; gap: 4px; } .tab-feature-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 9px; } .tab-feature-item img { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; } .tab-feature-item p { font-size: var(--fs-body-md); font-weight: 500; color: var(--mobupps-black); line-height: 1.4; } .btn-dark { display: inline-flex; align-items: center; justify-content: center; background: var(--neutral-darkest); color: #fff; border: none; border-radius: var(--radius-sm); padding: 8px 12px; font-size: var(--fs-body-sm); font-weight: 400; cursor: pointer; transition: opacity 0.2s; align-self: flex-start; } .btn-dark:hover { opacity: 0.85; } .tab-content-right { flex: 1; align-self: stretch; border-radius: var(--radius-md); overflow: hidden; position: relative; min-height: 364px; } .tab-content-right.pink-bg { background: var(--red-lighter); } .tab-content-right.purple-bg { background: var(--persian-blue-lighter); } .tab-content-right .tab-screenshot { position: absolute; left: 50%; transform: translateX(-50%); top: 20%; width: calc(100% - 74px); border-radius: var(--radius-sm); box-shadow: 0px 25px 37.7px 10px rgba(18,12,41,0.11); overflow: hidden; } .tab-content-right .tab-screenshot img { width: 100%; height: 100%; object-fit: cover; } /* ═══════════════════════════════════════════════════════════ CTA + FORM ═══════════════════════════════════════════════════════════ */ .cta-section { position: relative; padding: 80px 0; /* Clip ONLY the gradient's horizontal over-size (no side band / horizontal scrollbar); `clip` (not `hidden`) makes no scroll container. overflow-y stays visible so the glow still bleeds softly up/down into the neighbouring blocks, as it always has. */ overflow-x: clip; overflow-y: visible; } /* Full-bleed gradient behind the card — mirrors MAFO's .mafo-contact__gradient. Vertical position is CARD-relative: `top` is a % of .cta-section (which hugs the card + its 80px padding), so the bright centre stays ~79% down the card at EVERY width instead of drifting. Width stays 110% for edge-to-edge coverage. The old `margin-top:-27%` scaled the offset with viewport WIDTH while the card centre is fixed, so it could never stay centred (pooled too high). translate(-50%,-50%) centres the glow's own centre on that point regardless of the gradient's rendered height. */ .cta-blob { position: absolute; top: 73%; /* ≈ 79% down the card (section = card + 80px top/bottom padding) */ left: 50%; transform: translate(-50%, -50%); width: 110%; max-width: none; height: auto; z-index: 0; pointer-events: none; user-select: none; } .cta-card { position: relative; z-index: 1; background: rgba(255,255,255,0.66); backdrop-filter: blur(15.1px); border-radius: var(--radius-lg); box-shadow: 0px 32px 64px -12px rgba(0,0,0,0.14); padding: 66px 59px; display: flex; align-items: center; justify-content: space-between; gap: 60px; } .cta-text-col { flex: 1; } .cta-title { font-size: var(--fs-headline-sm); font-weight: 400; color: #000; white-space: nowrap; margin-bottom: 10px; } .cta-subtitle { font-size: var(--fs-title-sm); font-weight: 400; color: var(--neutral); line-height: 1.4; max-width: 590px; } /* Figma 3604:10526 — Poppins Medium 22 / neutral-600, 22px below the subtitle. Link colour + underline set explicitly: the local `a` reset above kills both, and layout.min.css adds `body a { text-decoration: none !important }` — hence !important. */ .cta-email { margin-top: 22px; font-size: 22px; line-height: 1.4; font-weight: 500; color: var(--color-neutral-600, #544d4d); } .cta-email a { color: inherit; text-decoration: underline !important; text-underline-position: from-font; } /* FORM */ .form-card { background: var(--bg-secondary); border: 2px solid var(--neutral-lighter); border-radius: var(--radius-md); padding: 32px; width: 444px; /* Figma form_wrapper 3604:10026 — was 435, which wrapped the shared 22px .ui-form__title onto two lines */ flex-shrink: 0; } /* Form heading: shared `.ui-form__title` in global-2026.css (was a bare `.form-card h3` fork at 20px, out of step with MAFO/iRTB at 22px). The heading carries no margin — the 24px rhythm comes from the form's own flex gap, same as every other 2026 form. */ .ui-form { display: flex; flex-direction: column; gap: 24px; } .form-fields { display: flex; flex-direction: column; gap: 24px; } .form-field { display: flex; flex-direction: column; gap: 4px; } .form-label { font-size: var(--fs-body-xs); font-weight: 500; color: var(--mobupps-black); line-height: 1.4; margin: 0; /* kill the inherited Bootstrap `label` margin-bottom (8px) so the label→input gap is the 4px flex gap, matching careers/contact */ } .form-input { background: #fff; border: 1px solid #e5e5e5; border-radius: var(--radius-sm); padding: 7.5px 12px; font-size: var(--fs-body-xs); font-weight: 400; color: var(--mobupps-black); min-height: 36px; box-shadow: 0px 1px 2px rgba(0,0,0,0.05); outline: none; transition: border-color 0.2s, box-shadow 0.2s; width: 100%; } .form-input::placeholder { color: #a3a3a3; } .form-input:focus { border-color: var(--persian-blue-light); box-shadow: 0 0 0 3px rgba(106,102,228,0.15); } .form-input.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(218,65,68,0.12); } .form-input.success { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.12); } .field-error { font-size: var(--fs-label-sm); color: var(--red); margin-top: 2px; display: none; } .field-error.visible { display: block; } .checkbox-group { display: flex; flex-direction: column; gap: 8px; } .checkbox-item { display: flex; align-items: center; gap: 8px; cursor: pointer; } .checkbox-item input[type="checkbox"] { display: none; } .checkbox-box { width: 16px; height: 16px; border: 1px solid #d4d4d4; border-radius: 4px; background: #fff; box-shadow: 0px 1px 2px rgba(0,0,0,0.05); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s; position: relative; } .checkbox-item input[type="checkbox"]:checked + .checkbox-box { background: var(--neutral-darkest); border-color: var(--neutral-darkest); } .checkbox-item input[type="checkbox"]:checked + .checkbox-box::after { content: ''; display: block; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(0px, -1px); } .checkbox-item input[type="checkbox"].error + .checkbox-box { border-color: var(--red); } .checkbox-label { font-size: var(--fs-body-xs); font-weight: 400; color: #404040; line-height: 1.4; } .btn-submit { background: #171717; color: #fafafa; border: none; border-radius: var(--radius-sm); padding: 8px 16px; font-size: var(--fs-body-xs); font-weight: 500; cursor: pointer; width: 100%; min-height: 36px; transition: opacity 0.2s, transform 0.1s; } .btn-submit:hover { opacity: 0.9; } .btn-submit:active { transform: scale(0.99); } .btn-submit.loading { opacity: 0.6; pointer-events: none; } /* Success message now uses the shared `.form-success-msg` standard component (global-2026.css), revealed by `.is-success` on #echoForm. */ .media-overlay.publishers{ background: var(--persian-blue-lighter); } /* ═══════════════════════════════════════════════════════════ FAQ ═══════════════════════════════════════════════════════════ */ .faq-section { position: relative; padding: 80px 0 100px; overflow: hidden; } .faq-blob { position: absolute; right: -200px; bottom: -300px; width: 900px; opacity: 0.5; pointer-events: none; z-index: 0; } .faq-list { position: relative; z-index: 1; } .faq-item { border-bottom: 2px solid var(--neutral-lighter); } .faq-question { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px; cursor: pointer; text-align: left; } .faq-question p { font-size: var(--fs-body-md); font-weight: 500; color: #000; line-height: 1.4; max-width: 700px; flex: 1; } .faq-icon { width: 24px; height: 24px; flex-shrink: 0; transition: transform 0.35s ease; } .faq-item.open .faq-icon { transform: rotate(45deg); } /* Smooth accordion: animate the REAL content height with a 0fr→1fr grid row instead of max-height. max-height:300px was much taller than the actual answer, so closing felt like a pause-then-snap (and it clipped long answers). The grid row eases to the exact height in both directions. */ .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; } .faq-item.open .faq-answer { grid-template-rows: 1fr; } /* The animated grid item — collapses to exactly 0. It carries NO padding (padding on the item would leave a residual the row can't close past), only overflow:hidden + min-height:0 so the content clips as it shrinks. */ .faq-answer__inner { overflow: hidden; min-height: 0; } .faq-answer p { margin: 0; padding: 0 32px 24px; /* horizontal inset + bottom gap, INSIDE the animated inner */ font-size: var(--fs-body-sm); font-weight: 400; color: #555; line-height: 1.7; opacity: 0; transition: opacity 0.3s ease; /* fade in/out as it expands/collapses */ } .faq-item.open .faq-answer p { opacity: 1; } /* ═══════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════ */ .footer-container { z-index: 10; position: relative; } .footer { background: var(--neutral-darker); border-radius: var(--radius-md); padding: 64px; display: flex; gap: 40px; align-items: flex-start; margin-bottom: 40px; max-width: calc(var(--max-w)); } .footer-col-nav { display: flex; flex-direction: column; gap: 4px; } .footer-col-nav a:visited {color: var(--neutral-lighter);} .footer-col-nav a:hover {color: #fff;} .footer-menu-label { font-size: var(--fs-body-xs); font-weight: 600; color: var(--neutral); line-height: 1.5; margin-bottom: 2px; } .footer-nav-link { font-size: var(--fs-body-xs); color: var(--neutral-lighter); line-height: 1.3; display: block; transition: color 0.15s; } .footer-nav-link:hover { color: #fff; } .footer-col-extra { display: flex; flex-direction: column; gap: 32px; } .footer-col-extra h4 { font-size: var(--fs-body-xs); font-weight: 600; color: var(--neutral); line-height: 1.7; } .footer-links { display: flex; flex-direction: column; } .footer-social { display: flex; gap: 16px; align-items: center; } .footer-social a { display: flex; align-items: center; } .footer-social img { width: 29px; height: 29px; } .footer-subscribe { display: flex; flex-direction: column; gap: 4px; margin-top: 0; } .footer-email-row { background: rgba(255,255,255,0.05); border: 1px solid #404040; border-radius: var(--radius-sm); height: 36px; display: flex; align-items: center; padding: 4px 8px 4px 12px; gap: 8px; width: 303px; } .footer-email-row input { flex: 1; background: none; border: none; outline: none; font-size: var(--fs-label-sm); color: #737373; } .footer-email-row input::placeholder { color: #737373; } .footer-email-btn { background: #f5f5f5; border: none; border-radius: 4px; padding: 4px 8px; font-size: var(--fs-label-sm); cursor: pointer; color: #0a0a0a; white-space: nowrap; } .footer-col-right { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; align-self: anchor-center; } .footer-certs { display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .footer-certs img { height: auto; width: auto;} .footer-certs { width: 100%; max-width: 508px;} .footer-copy { font-size: var(--fs-label-sm); color: var(--neutral); text-align: center; margin-top: 32px; } @media (min-width: 1272px) { .cap-card:last-child {width: 1250px;} } @media (max-width: 1350px) { .footer {margin: 0 16px;} } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — TABLET Stack the CTA card so the fixed-width form never overflows the viewport (mirrors MAFO stacking its .mafo-contact card at ≤1023). ═══════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { .cta-card { flex-direction: column; align-items: stretch; gap: 32px; padding: 40px; } .cta-text-col { flex: 1 1 100%; } .cta-title { white-space: normal; } .form-card { width: 100%; flex-shrink: 1; } } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — MOBILE ═══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { :root { --side-pad: 16px; } /* hero */ .hero { min-height: auto; padding-top: 90px; padding-bottom: 61px; } .hero-bg { top: -237px; width: 860px; height: 736px; } /* left:50% + translateX(-50%) inherited from base — stays centred */ /* Logo size is handled by the fluid `width: min(728px, 88vw)` base rule (below), which the appended block would override here anyway. */ .hero-powered { font-size: 20px; } .hero-tagline { margin-top: 20px; font-size: 32px; white-space: normal; line-height: 1.27; padding: 0 8px; } .hero-dashboard { border-radius: 6px; margin-top: 40px; } #hero-dashboard-video { width: 100%; } .hero-desc-card { width: 100%; max-width: 100%; padding: 32px; border-radius: var(--radius-md); margin-top: 20px; margin-left: 0; align-self: auto; } .hero-desc-card p { font-size: 20px; } .hero-desc-text { width: 100%; max-width: 100%; align-self: auto; margin-left: 0; margin-bottom: 0; } .hero-desc-text p { font-size: 16px; } /* stats */ .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .stats-section { padding-bottom: 97px; } .stats-heading { font-size: 28px; } .stat-card { min-height: 160px; padding: 10px; } .stat-value { font-size: 28px; } /* problem */ .problem-section{padding: 0;} .problem-cards { gap: 12px; margin-bottom: 32px;} .problem-card { max-width: 100%; flex: 1 1 100%; } .problem-solution { flex-direction: column; align-items: flex-start; padding: 24px; gap: 24px; } .problem-solution-logo .sol-logo-group { height: 50px; } .problem-solution-logo .sol-logo-ai { height: 50px; } .problem-solution-text { font-size: 20px; } /* capabilities */ .capabilities-section{ padding-bottom: 0px; } .cap-card { position: relative; top: auto !important; flex-direction: column; min-height: auto; margin-bottom: 41px; } .cap-card-text { width: 100%; max-width: 100%; font-size: 25px;} .cap-card-media { width: 100%; max-width: 100%; height: 160px; margin-top: 16px; } .cap-card:last-child .cap-card-media { height: 144px; width: 538px;} .cap-card-media .media-screenshot { left: 16px; top: 14px; width: calc(100% - 32px); height: calc(100% - 28px); } .cap-logos-card { width: 100%; flex-wrap: wrap; height: auto; padding: 16px; } /* how section */ .tab-panel { flex-direction: column; } .tab-content-left { width: 100%; max-width: 100%; } .tab-content-right { width: 100%; max-width: 100%; min-height: 200px; } .tab-screenshot { position: absolute; left: calc(50% - 269px); top: 51px; width: 538px; height: 255px; border-radius: var(--radius-sm); box-shadow: 0px 25px 37.7px 10px rgba(18,12,41,0.11); overflow: hidden; } .tab-screenshot img { left: 16px; top: 14px; width: calc(100% - 32px); height: calc(100% - 28px); } .how-heading { font-size: 32px; } .how-section{ padding: 40px 0; } .how-subtext{ font-size: 25px; } .tab-panel{ padding: 12px; } .tab-panel-button{ width: 100%; } /* cta */ .cta-section{ padding: 66px 0; } .cta-card { flex-direction: column; padding: 12px; gap: 24px; border-radius: var(--radius-md); } .cta-text-col{ padding: 0 12px; font-size: 25px; } .cta-title { font-size: 32px; white-space: normal; } /* Keep the gradient on mobile too. The stacked card is tall & narrow, so a 110%-wide glow renders too short (width-tied height); oversize the width so its height covers the whole card. Still card-relative via base top:73%; body{overflow-x:hidden} clips the horizontal over-size. */ .cta-blob{ width: 320%; } .form-card { width: 100%; } /* faq */ .faq-section{padding: 0px 0 100px;} .faq-question { padding: 20px 16px; } .faq-answer p { padding: 0 16px 20px; } /* footer */ .footer { flex-direction: column; padding: 24px; margin: 0 16px 40px 16px; gap: 32px; } .footer-col-right { align-items: flex-start; } .footer-certs img { height: 60px; } .footer-email-row { width: 100%; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* ── Utility ─────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* ═══════════════════════════════════════════════════════════ HERO LOGO — interactive hover spotlight White EchoAI wordmark at rest; a cursor-following gradient reveal masked to the wordmark on hover. Ported from the home-2026 .echo-logo; sized to match the old static logo. ═══════════════════════════════════════════════════════════ */ .hero-logo-img .echo-logo { --echo-mask: url("data:image/svg+xml,%3Csvg%20width%3D%22548%22%20height%3D%22124%22%20viewBox%3D%220%200%20548%20124%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M63.7044%201.43215L72.332%2035.8086C73.276%2039.5761%2075.2258%2043.0143%2077.9721%2045.7602C80.7183%2048.506%2084.157%2050.4556%2087.925%2051.3995L122.304%2060.024C124.214%2060.5028%20124.214%2063.217%20122.304%2063.6958L87.923%2072.3223C84.157%2073.2661%2080.7183%2075.2157%2077.9721%2077.9616C75.2258%2080.7075%2073.276%2084.1477%2072.332%2087.9132L63.7044%20122.29C63.2254%20124.198%2060.5113%20124.198%2060.032%20122.29L51.4064%2087.9132C50.4604%2084.1477%2048.5105%2080.7075%2045.7643%2077.9616C43.02%2075.2157%2039.5794%2073.2661%2035.8134%2072.3223L1.43234%2063.6958C-0.477448%2063.217%20-0.477448%2060.5032%201.43234%2060.024L35.8134%2051.3995C39.5794%2050.4536%2043.0181%2048.5041%2045.7643%2045.7602C48.5105%2043.0143%2050.4604%2039.5761%2051.4064%2035.8086L60.032%201.43215C60.5109%20-0.477384%2063.2251%20-0.477384%2063.7044%201.43215Z%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M389.651%2095.7314C392.593%2095.7314%20395.175%2095.4541%20397.402%2094.897C399.707%2094.3404%20401.615%2093.2267%20403.126%2091.5588C404.637%2089.8885%20405.79%2087.3843%20406.584%2084.0456C407.379%2080.7074%20407.778%2076.2952%20407.778%2070.8094C407.778%2065.2458%20407.379%2060.834%20406.584%2057.5732C405.79%2054.3147%20404.637%2051.8501%20403.126%2050.1798C401.615%2048.5115%20399.707%2047.3983%20397.402%2046.8416C395.175%2046.285%20392.593%2046.0073%20389.651%2046.0073C386.629%2046.0073%20384.005%2046.2846%20381.779%2046.8416C379.552%2047.3983%20377.684%2048.5119%20376.173%2050.1798C374.663%2051.8501%20373.511%2054.3147%20372.715%2057.5732C371.921%2060.8336%20371.523%2065.2458%20371.523%2070.8094C371.523%2076.2952%20371.921%2080.707%20372.715%2084.0456C373.511%2087.3839%20374.663%2089.8885%20376.173%2091.5588C377.684%2093.2271%20379.552%2094.3404%20381.779%2094.897C384.005%2095.4537%20386.629%2095.7314%20389.651%2095.7314ZM389.651%20103.484C385.038%20103.484%20380.983%20103.005%20377.484%20102.052C374.066%20101.098%20371.204%2099.4295%20368.899%2097.0446C366.594%2094.6602%20364.883%2091.3597%20363.769%2087.147C362.658%2082.8546%20362.101%2077.4089%20362.101%2070.8098C362.101%2064.133%20362.658%2058.6872%20363.769%2054.4746C364.883%2050.1802%20366.594%2046.8817%20368.899%2044.577C371.204%2042.1925%20374.066%2040.5619%20377.484%2039.6879C380.983%2038.7341%20385.038%2038.2572%20389.651%2038.2572C394.263%2038.2572%20398.276%2038.7341%20401.695%2039.6879C405.194%2040.6417%20408.096%2042.31%20410.401%2044.6964C412.706%2047.0011%20414.416%2050.2997%20415.53%2054.592C416.721%2058.8067%20417.318%2064.2123%20417.318%2070.8094C417.318%2077.4882%20416.721%2082.9721%20415.53%2087.2664C414.416%2091.4787%20412.706%2094.7776%20410.401%2097.1621C408.175%2099.4687%20405.313%20101.097%20401.815%20102.051C398.316%20103.005%20394.261%20103.484%20389.65%20103.484M294.256%20102.768V11.7852H303.678V46.1275C306.619%2043.9803%20310.118%2042.1128%20314.171%2040.5222C318.306%2038.8539%20322.599%2038.018%20327.052%2038.018C331.504%2038.018%20335.16%2038.9718%20338.024%2040.8793C340.966%2042.7869%20343.112%2045.3713%20344.463%2048.6317C345.896%2051.8902%20346.61%2055.5081%20346.61%2059.4811V102.767H337.188V60.4349C337.188%2057.7331%20336.632%2055.3482%20335.52%2053.2812C334.486%2051.2137%20332.975%2049.5855%20330.988%2048.3921C329%2047.1987%20326.615%2046.604%20323.833%2046.604C321.208%2046.604%20318.784%2046.8813%20316.556%2047.4383C314.331%2047.9152%20312.184%2048.6317%20310.118%2049.5855C308.05%2050.4595%20305.903%2051.5331%20303.678%2052.8043V102.768H294.256ZM258.926%20103.484C255.348%20103.484%20252.009%20103.005%20248.909%20102.052C245.808%20101.098%20243.104%2099.4295%20240.799%2097.0446C238.494%2094.6602%20236.703%2091.3597%20235.432%2087.147C234.161%2082.9324%20233.524%2077.5664%20233.524%2071.0495C233.524%2064.4504%20234.121%2059.0447%20235.313%2054.8321C236.506%2050.5397%20238.214%2047.1995%20240.442%2044.8146C242.667%2042.4302%20245.371%2040.7619%20248.551%2039.8077C251.732%2038.8539%20255.27%2038.3751%20259.166%2038.3751C262.345%2038.3751%20265.804%2038.5346%20269.54%2038.8539C273.278%2039.0912%20276.855%2039.4883%20280.273%2040.0454V45.6506H261.669C257.615%2045.6506%20254.197%2046.3251%20251.413%2047.678C248.631%2049.0289%20246.523%2051.5732%20245.092%2055.3086C243.661%2058.9642%20242.947%2064.2925%20242.947%2071.2867C242.947%2078.0433%20243.701%2083.2117%20245.212%2086.7895C246.723%2090.3654%20248.87%2092.83%20251.652%2094.1809C254.434%2095.4541%20257.813%2096.0909%20261.789%2096.0909H281.23V101.574C279.4%20101.894%20277.254%20102.211%20274.789%20102.528C272.405%20102.847%20269.86%20103.085%20267.156%20103.244C264.454%20103.404%20261.709%20103.484%20258.927%20103.484M184.518%20103.245C182.611%20103.245%20180.583%20103.085%20178.437%20102.768C176.29%20102.371%20174.262%20101.614%20172.355%20100.503C170.447%2099.3894%20168.896%2097.7191%20167.704%2095.4941C166.511%2093.1895%20165.914%2090.0885%20165.914%2086.1932V32.652C165.914%2029.2336%20166.391%2026.412%20167.345%2024.185C168.379%2021.8804%20169.73%2020.0922%20171.4%2018.821C173.071%2017.4681%20174.939%2016.5144%20177.006%2015.9573C179.072%2015.3225%20181.139%2015.0036%20183.207%2015.0036C188.136%2015.0833%20192.709%2015.2031%20196.922%2015.3626C201.135%2015.4404%20205.111%2015.5602%20208.849%2015.7197C212.665%2015.7994%20216.361%2015.9173%20219.939%2016.0768V23.7074H185.592C182.491%2023.7074%20180.026%2024.5433%20178.198%2026.2116C176.37%2027.8819%20175.455%2030.5437%20175.455%2034.2017V54.9507L214.692%2055.5454V62.8209L175.455%2063.4157V84.0453C175.455%2086.9867%20175.932%2089.2137%20176.886%2090.7241C177.92%2092.2329%20179.271%2093.2264%20180.942%2093.7032C182.61%2094.1801%20184.32%2094.4194%20186.069%2094.4194H219.939V102.05C216.281%20102.29%20212.424%20102.489%20208.371%20102.647C204.396%20102.807%20200.38%20102.926%20196.325%20103.004C192.349%20103.084%20188.413%20103.164%20184.518%20103.244%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M547.01%2021.7676V103.565H530.602V21.7676H547.01Z%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M496.867%2087.9788H464.284L458.893%20103.565H441.664L471.082%2021.6504H490.186L519.605%20103.565H502.258L496.867%2087.9788ZM492.413%2074.8538L480.576%2040.6349L468.738%2074.8538H492.413Z%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); --echo-spot: 200px; --echo-gscale: 100%; /* gradient scale inside the logo (Claude-design tweak) */ --echo-fade: 0.5s; /* fade-out duration on mouse leave */ /* Fluid width so the wordmark scales DOWN on tablet/mobile instead of overflowing. Capped at 728px = the previous fixed desktop size (height 164.858 x 548/124). Below ~828px viewport it shrinks with the screen. `height:auto` + aspect-ratio keeps the shape; a fixed height couldn't scale and the inline-block parent made max-width:100% a no-op. */ width: min(728px, 88vw); height: auto; max-width: 100%; aspect-ratio: 548 / 124; position: relative; /* cursor stays default on hover (latest design — no crosshair) */ -webkit-mask: var(--echo-mask) center / contain no-repeat; mask: var(--echo-mask) center / contain no-repeat; } .hero-logo-img .echo-logo__rest { position: absolute; inset: 0; background: #ffffff; } .hero-logo-img .echo-logo__grad { position: absolute; inset: 0; background: radial-gradient(circle at 16% 38%, #ea5956, transparent 55%), radial-gradient(circle at 44% 72%, #e280e0, transparent 55%), radial-gradient(circle at 70% 28%, #fbd25a, transparent 55%), radial-gradient(circle at 92% 66%, #2b25d9, transparent 62%), #ea5956; background-size: var(--echo-gscale) var(--echo-gscale); background-position: center; background-repeat: no-repeat; opacity: 0; -webkit-mask: radial-gradient(circle var(--echo-spot) at var(--emx) var(--emy), #000 0%, #000 30%, transparent 72%); mask: radial-gradient(circle var(--echo-spot) at var(--emx) var(--emy), #000 0%, #000 30%, transparent 72%); transition: opacity var(--echo-fade) ease, --emx 0.16s ease-out, --emy 0.16s ease-out; }