/* ============================================================ Locobuzz Landing — custom styles layered on top of Tailwind. Right-aligned prose throughout; flip when Arabic copy lands. ============================================================ */ :root { --brand-blue: #0062FF; --brand-purple: #C636ED; --brand-navy: #1C1A37; --brand-indigo: #16114A; --brand-sky: #D1EFFF; --brand-blush: #FFE1EC; } html { scroll-behavior: smooth; } html, body { overflow-x: hidden; max-width: 100vw; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; } .page-bg { background-color: #f5f3ee; } .font-arabic { font-family: 'Cairo', 'Inter', sans-serif; } [dir="rtl"] body { font-family: 'Cairo', 'Inter', sans-serif; } .gradient-text { background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ========================================================== HEADER ========================================================== */ .nav-link { display: inline-flex; align-items: center; gap: 0.3rem; color: rgba(28, 26, 55, 0.78); transition: color 0.15s ease; } .nav-link:hover { color: var(--brand-navy); } .chev { width: 0.7rem; height: 0.7rem; opacity: 0.6; } .lang-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(28, 26, 55, 0.1); background: #fff; font-size: 0.85rem; font-weight: 600; color: var(--brand-navy); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .lang-pill:hover { background: rgba(28, 26, 55, 0.03); border-color: rgba(28, 26, 55, 0.18); } /* ========================================================== HERO ========================================================== */ .hero-h1 { color: #3D434F; text-align: center; font-family: 'Inter', sans-serif; font-size: 54px; font-weight: 600; line-height: normal; letter-spacing: -0.02em; } .hero-p { margin: 1.5rem auto 0; max-width: 900px; color: #000; text-align: center; font-family: 'Geist', 'Inter', sans-serif; font-size: 18px; font-weight: 400; line-height: normal; } .hero-bg-blob { position: absolute; top: 0; width: 55%; height: 100%; pointer-events: none; z-index: 0; filter: blur(60px); opacity: 0.55; } .hero-bg-blob-left { left: -10%; background: radial-gradient(circle at 50% 50%, #2436ff 0%, rgba(36, 54, 255, 0.7) 25%, rgba(36, 54, 255, 0) 65%); } .hero-bg-blob-right { right: -10%; background: radial-gradient(circle at 50% 50%, #e07cff 0%, rgba(224, 124, 255, 0.7) 25%, rgba(224, 124, 255, 0) 65%); } .hero-stage { position: relative; height: 26rem; isolation: isolate; } .hero-collage { position: absolute; object-fit: contain; --p: 0; /* scroll progress 0..1, set by JS */ will-change: transform; transition: transform 0.05s linear; } .hero-collage-main { width: 56%; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } /* Left images drift further left + up as progress increases */ .hero-collage-genie { width: 10rem; left: 0; top: 22%; z-index: 4; transform: translate(calc(var(--p) * -18rem), calc(var(--p) * -12rem)); } .hero-collage-social { width: 17rem; left: 9%; top: 35%; z-index: 3; transform: translate(calc(var(--p) * -14rem), calc(var(--p) * -10rem)); } /* Right images drift further right + up */ .hero-collage-steps { width: 13rem; right: 12%; top: 20%; z-index: 3; transform: translate(calc(var(--p) * 14rem), calc(var(--p) * -11rem)); } .hero-collage-cloud { width: 11rem; right: 4%; top: 55%; z-index: 4; transform: translate(calc(var(--p) * 18rem), calc(var(--p) * -6rem)); } @media (max-width: 1024px) { .hero-stage { height: 20rem; } .hero-collage-main { width: 65%; } .hero-collage-genie { width: 6rem; } .hero-collage-social { width: 11rem; } .hero-collage-steps { width: 8rem; } .hero-collage-cloud { width: 7rem; } } @media (max-width: 640px) { .hero-h1 { font-size: 34px; line-height: 1.15; } .hero-p { font-size: 15px; line-height: 1.5; padding: 0 0.5rem; } .hero-h1 br, .hero-p br { display: none; } /* Drop absolute positioning so the dashboard renders inline */ .hero-stage { height: auto; padding-top: 1rem; } .hero-collage-main { position: static; width: 100%; transform: none; } .hero-collage-genie, .hero-collage-social, .hero-collage-steps, .hero-collage-cloud { display: none; } } /* ========================================================== CTA PILL (reused in hero + final CTA) ========================================================== */ .cta-pill { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 1.5rem; border-radius: 9999px; font-weight: 600; color: #fff; background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple)); box-shadow: 0 14px 36px -10px rgba(0, 98, 255, 0.45); transition: transform 0.2s ease, box-shadow 0.2s ease; } .cta-pill:hover { transform: translateY(-1px); box-shadow: 0 18px 42px -10px rgba(0, 98, 255, 0.55); } .cta-arrow { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9999px; background: rgba(255, 255, 255, 0.18); color: #fff; } /* Smaller CTA pill for header */ .cta-pill--sm { padding: 0.4rem 0.4rem 0.4rem 1rem; font-size: 0.85rem; } .cta-pill--sm .cta-arrow { width: 1.6rem; height: 1.6rem; } .cta-pill--sm .cta-arrow svg { width: 0.85rem; height: 0.85rem; } @media (max-width: 640px) { .cta-pill--sm { padding: 0.35rem 0.35rem 0.35rem 0.85rem; font-size: 0.8rem; } } /* Footer social icons (light footer) */ .social-icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; background: rgba(28, 26, 55, 0.06); color: rgba(28, 26, 55, 0.75); transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .social-icon:hover { background: var(--brand-blue); color: #fff; transform: translateY(-1px); } .social-icon svg { width: 1rem; height: 1rem; } /* ========================================================== TRUSTED-BY GRID (5 × 2 logo wall) ========================================================== */ .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); } .logo-cell { aspect-ratio: 2 / 1; display: grid; place-items: center; padding: 1.25rem 1.5rem; border-right: 1px solid rgba(28, 26, 55, 0.07); border-bottom: 1px solid rgba(28, 26, 55, 0.07); } .logo-cell img { max-height: 3rem; max-width: 80%; width: auto; height: auto; object-fit: contain; } /* 2-col grid: drop right border every 2nd, bottom border on last 2 */ .logo-cell:nth-child(2n) { border-right: none; } .logo-cell:nth-last-child(-n+2) { border-bottom: none; } @media (min-width: 640px) { .trust-grid { grid-template-columns: repeat(5, 1fr); } /* 5-col grid: restore borders, drop right every 5th and bottom on last row */ .logo-cell { border-right: 1px solid rgba(28, 26, 55, 0.07); border-bottom: 1px solid rgba(28, 26, 55, 0.07); } .logo-cell:nth-child(2n) { border-right: 1px solid rgba(28, 26, 55, 0.07); } .logo-cell:nth-child(5n) { border-right: none; } .logo-cell:nth-last-child(-n+2) { border-bottom: 1px solid rgba(28, 26, 55, 0.07); } .logo-cell:nth-last-child(-n+5) { border-bottom: none; } } /* ========================================================== HOW IT WORKS (step cards) ========================================================== */ .step-card { background: #fff; border: 1px solid rgba(28, 26, 55, 0.06); border-radius: 1.5rem; padding: 1.75rem; box-shadow: 0 10px 40px -12px rgba(28, 26, 55, 0.08); display: flex; flex-direction: column; gap: 0.75rem; text-align: left; transition: transform 0.25s ease, box-shadow 0.25s ease; } .step-card:hover { transform: translateY(-4px); box-shadow: 0 18px 48px -12px rgba(28, 26, 55, 0.18); } .step-number { font-family: 'Instrument Serif', Georgia, serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.05em; background-image: linear-gradient(90deg, var(--brand-blue), var(--brand-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } .step-body { color: rgba(28, 26, 55, 0.7); line-height: 1.6; font-size: 0.95rem; } .step-visual { margin-top: auto; border-radius: 1rem; aspect-ratio: 16 / 9; } /* ========================================================== ONE CX BANNER ========================================================== */ .one-cx-bg { background: linear-gradient(90deg, #D1EFFF 0%, #F5E8F4 50%, #FFE1EC 100%); border: 1px solid rgba(28, 26, 55, 0.05); } /* ========================================================== PLATFORM SECTION (tabs + feature tiles) ========================================================== */ .platform-bg { background: #f5f3ee; } .tab-bar { display: flex; justify-content: space-around; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 56rem; margin: 0 auto; } .tab-divider { max-width: 56rem; margin: 0.75rem auto 0; height: 1px; background: rgba(28, 26, 55, 0.12); } .tab { padding: 0.7rem 1.5rem; border-radius: 9999px; font-size: 0.95rem; font-weight: 600; color: rgba(28, 26, 55, 0.55); background: transparent; border: none; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .tab:hover:not(.tab-active) { color: var(--brand-navy); } .tab.tab-active, .tab.tab-active:hover, .tab.tab-active:focus { color: #fff !important; background: var(--brand-navy); padding: 0.7rem 1.75rem; } .feature-tile { display: flex; flex-wrap: wrap; align-items: center; background: #fff; border: 1px solid rgba(28, 26, 55, 0.05); border-radius: 1.25rem; padding: 1.5rem; text-align: left; box-shadow: 0 1px 2px rgba(28, 26, 55, 0.04); transition: transform 0.2s ease, box-shadow 0.2s ease; } .feature-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -16px rgba(28, 26, 55, 0.18); } .feature-icon-wrap { flex: 0 0 auto; margin-right: 0.7rem; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background: linear-gradient(135deg, #4A6CF7 0%, #3B5BDB 100%); display: grid; place-items: center; color: #fff; box-shadow: 0 4px 10px -2px rgba(74, 108, 247, 0.45); } .feature-icon-wrap--light { background: linear-gradient(135deg, #6B8AF7 0%, #5677E0 100%); } .feature-icon-svg { width: 1.15rem; height: 1.15rem; } .feature-title { flex: 1; font-weight: 700; font-size: 0.95rem; color: var(--brand-navy); } .feature-body { flex: 1 1 100%; margin-top: 0.6rem; font-size: 0.85rem; color: rgba(28, 26, 55, 0.55); line-height: 1.55; } /* ========================================================== AI & DIALECT (bullets + mascot below box) ========================================================== */ .bullet-line { position: relative; padding-left: 1.25rem; font-size: 0.95rem; line-height: 1.5; } .bullet-line::before { content: ""; position: absolute; left: 0; top: 0.55rem; width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple)); } .mascot-wrap { position: relative; margin-top: 0.5rem; } .mascot-img { display: block; margin: -4rem auto 0; height: 7rem; width: auto; position: relative; z-index: 2; } /* ========================================================== AI CAROUSEL ========================================================== */ .ai-carousel { position: relative; } .ai-viewport { overflow: hidden; padding: 0.5rem 0; } .ai-track { display: flex; gap: 1.25rem; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .ai-card { display: flex; flex-direction: column; gap: 1rem; box-sizing: border-box; min-width: 0; background: #fff; border: 1px solid rgba(28, 26, 55, 0.06); border-radius: 1.5rem; padding: 1.75rem 1.5rem; text-align: left; box-shadow: 0 10px 40px -12px rgba(28, 26, 55, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; } .ai-card:hover { transform: translateY(-3px); box-shadow: 0 18px 48px -12px rgba(28, 26, 55, 0.18); } .ai-card-title { font-weight: 700; font-size: 1.1rem; color: var(--brand-navy); } .ai-card-body { font-size: 0.9rem; color: rgba(28, 26, 55, 0.7); line-height: 1.55; min-height: 7rem; } .ai-card-visual { margin-top: auto; aspect-ratio: 16 / 9; border-radius: 0.85rem; background: #f5f3eb; display: grid; place-items: center; overflow: hidden; } .ai-card-visual img { width: 100%; height: 100%; object-fit: contain; } .ai-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; } .ai-arrow { width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid rgba(28, 26, 55, 0.12); background: #fff; color: var(--brand-navy); display: grid; place-items: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; } .ai-arrow:hover:not(:disabled) { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); } .ai-arrow:disabled { opacity: 0.35; cursor: not-allowed; } .ai-dots { display: inline-flex; align-items: center; gap: 0.4rem; } .ai-dot { width: 0.5rem; height: 0.5rem; border: none; padding: 0; border-radius: 9999px; background: rgba(28, 26, 55, 0.18); cursor: pointer; transition: width 0.2s ease, background 0.2s ease; } .ai-dot-active { width: 1.5rem; background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple)); } /* ========================================================== SUCCESS STORY ========================================================== */ .success-card { position: relative; border-radius: 2rem; padding: 2rem 1.5rem 1.5rem; background: linear-gradient(120deg, #D1EFFF 0%, #f5f0f8 50%, #FFE1EC 100%); } .success-pill-wrap { display: flex; justify-content: center; margin-bottom: 1.25rem; } .success-pill { display: inline-block; padding: 0.45rem 1.1rem; border-radius: 9999px; border: 1px solid rgba(0, 98, 255, 0.4); background: #fff; color: var(--brand-navy); font-size: 0.85rem; font-weight: 600; } .success-inner { position: relative; background: #fff; border-radius: 1.5rem; padding: 2rem 2rem 1.25rem; box-shadow: 0 10px 32px -16px rgba(28, 26, 55, 0.12); } .success-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; padding: 1.75rem 1.25rem; border-radius: 1.25rem; background: linear-gradient(160deg, #1C1A37 0%, #2A2752 100%); color: #fff; } .stat-item { text-align: center; } .stat-row { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .stat-num { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; } .stat-icon { width: 1.4rem; height: 1.4rem; object-fit: contain; } .stat-label { margin-top: 0.5rem; font-size: 0.7rem; line-height: 1.4; color: rgba(255, 255, 255, 0.6); } .success-footer { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid rgba(28, 26, 55, 0.08); text-align: center; font-size: 0.85rem; color: var(--brand-navy); } .success-house { position: absolute; right: -0.5rem; bottom: -1.5rem; width: 9rem; height: auto; pointer-events: none; z-index: 3; } @media (max-width: 640px) { .success-stats { grid-template-columns: 1fr; } .success-house { width: 6rem; right: 0.5rem; bottom: -1rem; } } /* ========================================================== OUTCOMES (case-study cards) ========================================================== */ .outcome-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; border-radius: 1.5rem; padding: 2rem; min-height: 22rem; box-shadow: 0 1px 2px rgba(28, 26, 55, 0.04); } .outcome-bg-pink { background: linear-gradient(0deg, #FBE3EC 0%, #FFFFFF 100%); } .outcome-bg-blue { background: linear-gradient(0deg, #E1E6F7 0%, #FFFFFF 100%); } .outcome-bg-lavender { background: linear-gradient(0deg, #F0E7F0 0%, #FFFFFF 100%); } .outcome-bg-sand { background: linear-gradient(0deg, #F5ECDC 0%, #FFFFFF 100%); } .outcome-v2-left { display: flex; flex-direction: column; padding-right: 1.5rem; border-right: 1px solid rgba(28, 26, 55, 0.1); } .outcome-v2-right { display: flex; flex-direction: column; gap: 0.75rem; } .outcome-v2-stat { margin-top: 1.25rem; } .outcome-v2-tag { margin-top: auto; } .outcome-v2-tools{ margin-top: auto; } .outcome-industry-pill { display: inline-block; width: fit-content; max-width: 100%; padding: 0.35rem 0.9rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; color: var(--brand-navy); white-space: normal; word-break: break-word; } .industry-pill-pink { background: #F0D9F5; } .industry-pill-violet { background: #DBDCF7; } .outcome-v2-stat { font-size: 2rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--brand-navy); } .outcome-arrow { color: rgba(28, 26, 55, 0.4); font-weight: 400; } .outcome-v2-sublabel { margin-top: 0.35rem; font-size: 0.85rem; color: rgba(28, 26, 55, 0.65); } .outcome-v2-tag { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; color: var(--brand-navy); } .outcome-v2-icon { width: 2.5rem; height: 2.5rem; object-fit: contain; } .outcome-v2-icon--logo { max-height: 1.75rem; width: auto; } .outcome-v2-title { font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: var(--brand-navy); } .outcome-v2-body { font-size: 0.85rem; line-height: 1.55; color: rgba(28, 26, 55, 0.7); } .outcome-v2-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tool-pill { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 9999px; background: #fff; border: 1px solid rgba(28, 26, 55, 0.08); font-size: 0.72rem; font-weight: 600; color: var(--brand-navy); } @media (max-width: 640px) { .outcome-v2 { grid-template-columns: 1fr; } .outcome-v2-left { border-right: none; border-bottom: 1px solid rgba(28, 26, 55, 0.1); padding-right: 0; padding-bottom: 1rem; } } /* ========================================================== WHY LOCOBUZZ (partner card + 3 pillars) ========================================================== */ .partner-bg { background: #f5f3ee; } .partner-card { position: relative; background: transparent; border: 1px solid rgba(28, 26, 55, 0.12); border-radius: 1.75rem; } .partner-heading-wrap { padding-right: 0.5rem; } .partner-heading-blue { font-family: 'Inter', sans-serif; font-size: 3.75rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--brand-blue); } .partner-heading-italic { margin-top: 0.75rem; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 4.5rem; line-height: 1.1; color: var(--brand-navy); } .partner-mascot { position: absolute; top: -2.5rem; right: 1.5rem; height: 6rem; width: auto; pointer-events: none; z-index: 3; } .pillar-v2 { background: #fff; border: 1px solid rgba(28, 26, 55, 0.06); border-radius: 1rem; padding: 1.75rem 1.5rem; text-align: left; box-shadow: 0 1px 2px rgba(28, 26, 55, 0.04); } .pillar-v2-title { font-size: 1.05rem; font-weight: 700; color: var(--brand-navy); } .pillar-v2-body { margin-top: 0.75rem; font-size: 0.85rem; line-height: 1.55; color: rgba(28, 26, 55, 0.6); } @media (max-width: 1024px) { img.partner-mascot, .partner-card .partner-mascot, .partner-mascot { display: none !important; } } @media (max-width: 640px) { .partner-heading-blue { font-size: 2rem; } .partner-heading-italic { font-size: 1.6rem; } } /* ========================================================== BOOK A DEMO (HubSpot form card) ========================================================== */ .demo-form-card { background: #fff; border-radius: 1.25rem; padding: 1.5rem; box-shadow: 0 12px 36px -16px rgba(28, 26, 55, 0.18); border: 1px solid rgba(28, 26, 55, 0.05); } .demo-form-title { font-weight: 700; font-size: 1.25rem; color: var(--brand-navy); margin-bottom: 1rem; text-align: left; } /* HubSpot form internals — restyle to match the brand */ .demo-form-card .hs-form-field { margin-bottom: 0.9rem; } .demo-form-card .hs-form-field label, .demo-form-card .hs-form-field > label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--brand-navy); margin-bottom: 0.35rem; } .demo-form-card .hs-form-field input[type="text"], .demo-form-card .hs-form-field input[type="email"], .demo-form-card .hs-form-field input[type="tel"], .demo-form-card .hs-form-field input[type="number"], .demo-form-card .hs-form-field textarea, .demo-form-card .hs-form-field select { width: 100% !important; padding: 0.7rem 0.9rem; border-radius: 0.6rem; border: 1px solid rgba(28, 26, 55, 0.15); background: #fff; font-family: inherit; font-size: 0.9rem; color: var(--brand-navy); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .demo-form-card .hs-form-field input:focus, .demo-form-card .hs-form-field textarea:focus, .demo-form-card .hs-form-field select:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(0, 98, 255, 0.15); } .demo-form-card .hs-error-msgs, .demo-form-card .hs-error-msg { list-style: none; padding: 0; margin: 0.3rem 0 0; font-size: 0.75rem; color: #d33d4f; } .demo-form-card .hs-submit input[type="submit"], .demo-form-card .hs-button { width: 100%; padding: 0.85rem 1.5rem; border-radius: 9999px; border: none; font-weight: 600; font-size: 0.95rem; color: #fff; background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple)); box-shadow: 0 12px 30px -10px rgba(0, 98, 255, 0.45); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .demo-form-card .hs-submit input[type="submit"]:hover, .demo-form-card .hs-button:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -10px rgba(0, 98, 255, 0.55); } .demo-form-card .submitted-message { font-size: 0.95rem; color: var(--brand-navy); padding: 1rem 0; } /* ========================================================== MOBILE polish (≤ 640 px) — keep everything readable + tight ========================================================== */ @media (max-width: 640px) { /* Smaller header CTA so it fits next to the wide logo */ .cta-pill--sm { padding: 0.3rem 0.3rem 0.3rem 0.7rem; font-size: 0.72rem; gap: 0.4rem; } .cta-pill--sm .cta-arrow { width: 1.4rem; height: 1.4rem; } .cta-pill--sm .cta-arrow svg { width: 0.7rem; height: 0.7rem; } /* Tabs: stack 3 tabs evenly without overflow */ .tab-bar { gap: 0.25rem; justify-content: center; } .tab { padding: 0.55rem 0.7rem; font-size: 0.78rem; } .tab-active { padding: 0.55rem 0.9rem; } /* Feature tiles: trim padding on mobile */ .feature-tile { padding: 1.25rem; } /* Step cards (How It Works): tighter padding + smaller image area on mobile */ .step-card { padding: 1.25rem; gap: 0.5rem; text-align: center; } .step-visual { aspect-ratio: auto; height: 9rem; padding: 0.5rem !important; } .step-card .step-body { font-size: 0.85rem; } .step-card h3 { font-size: 1.25rem !important; } /* Success card: less inner padding, smaller stat numbers */ .success-card { padding: 1.5rem 1rem 1rem; border-radius: 1.5rem; } .success-inner { padding: 1.25rem 1rem 1rem; border-radius: 1.25rem; } .stat-num { font-size: 1.4rem; } /* Outcome cards: tighter padding when stacked */ .outcome-v2 { padding: 1.25rem; gap: 1rem; min-height: 0; } .outcome-v2-stat { font-size: 1.75rem; margin-top: 0.5rem; } /* AI carousel cards: a bit roomier when only one is visible */ .ai-card-body { min-height: auto; } /* AI Dialect bullets: smaller spot indicator */ .bullet-line { font-size: 0.9rem; padding-right: 1rem; } /* Carousel arrows: closer together, smaller */ .ai-arrow { width: 2.25rem; height: 2.25rem; } /* Make sure no card / image / nested grid overflows the viewport */ section, .partner-card, .success-card, .success-inner, .outcome-v2, .ai-card, .step-card, .feature-tile { max-width: 100%; box-sizing: border-box; } .partner-card img:not(.partner-mascot), .success-card img, .outcome-v2 img, .ai-card-visual img, .step-visual img { max-width: 100%; height: auto; } /* Mascot is decorative — hide entirely on mobile/tablet, partner card reads cleaner without it */ .partner-mascot { display: none; } /* Partner heading: bigger Arabic chars need a smaller mobile cap */ .partner-heading-blue { font-size: 1.75rem; line-height: 1.15; } .partner-heading-italic { font-size: 1.45rem; line-height: 1.2; } /* Hero collage stage: kill fixed height so nothing leaks below */ .hero-stage { padding-top: 0; } /* Hero blobs were tied to a 26rem stage — neuter them on mobile so they don't bleed into the trust-by section */ .hero-bg-blob { display: none; } } /* ========================================================== RTL polish (only for elements that don't auto-mirror) ========================================================== */ [dir="rtl"] .cta-pill { padding: 0.75rem 1.5rem 0.75rem 0.75rem; } [dir="rtl"] .cta-arrow svg { transform: scaleX(-1); } [dir="rtl"] .bullet-line { padding-right: 0; padding-left: 1.25rem; } [dir="rtl"] .bullet-line::before { right: auto; left: 0; }