/* ======================================    GLOBAL TYPOGRAPHY — V5 ====================================== */ :root { --tb-font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; } /* Global application */ html, body { font-family: var(--tb-font-primary); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings — slightly stronger */ h1, h2, h3, h4, h5, h6, .tb-title { font-weight: 600; letter-spacing: -0.015em; font-family: 'Inter'; } /* Buttons / CTAs */ .tb-btn, .tb-cta { font-weight: 600; } /* ============================================================    HERO v50 — Premium Consulting Hero    Only affects: .tb-hero and its internal elements    NEVER touches .tb-section, .tb-container, .tb-title    ============================================================ */ /* Base Hero Container */ .tb-hero { position: relative; padding: 140px 0 160px; background: linear-gradient(135deg, #28a745 0%, #2fbf62 40%, #1d7c35 100%); color: #fff; border-bottom-left-radius: 42px; border-bottom-right-radius: 42px; overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,0.18); isolation: isolate; } /* Floating Glow Layer */ .tb-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22), transparent 60%); opacity: 0.55; z-index: -1; } /* Soft Moving Overlay */ .tb-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,255,255,0.15) 0%, transparent 60%); mix-blend-mode: screen; opacity: 0.35; animation: hero-move 8s ease-in-out infinite alternate; z-index: -1; } @keyframes hero-move { 0% { transform: translateY(0px) translateX(0px); } 100% { transform: translateY(-35px) translateX(25px); } } /* Title inside hero */ .tb-hero .tb-title { color: #fff !important; font-weight: 800; font-size: 52px; line-height: 1.15; margin-bottom: 28px; text-shadow: 0 2px 6px rgba(0,0,0,0.25); } .tb-hero .tb-title::after { background: rgba(255,255,255,0.75); } /* Subtext */ .tb-hero .tb-subtext { color: #555; font-size: 22px; margin-bottom: 38px; text-shadow: 0 1px 4px rgba(0,0,0,0.22); } /* CTA Button inside hero */ /* Force hero CTA to stay inline on all screen sizes */ .tb-hero .tb-btn, .tb-hero .tb-btn-primary { display: inline-flex !important; width: auto !important; max-width: 100%; white-space: nowrap; justify-content: center; align-items: center; } /* Your button styling kept intact */ .tb-hero .tb-btn-primary { background: #ffffff; color: #28a745; padding: 16px 36px; font-size: 18px; border-radius: 14px; font-weight: 700; box-shadow: 0 14px 32px rgba(0,0,0,0.18); transform: translateY(0); } /* Prevent mobile rules from forcing it full width */ @media (max-width: 767.98px) { .tb-hero .tb-btn { width: auto !important; display: inline-flex !important; justify-content: center; white-space: nowrap; } } .tb-hero .tb-btn-primary:hover { transform: translateY(-6px); background: #f8fff9; box-shadow: 0 18px 45px rgba(0,0,0,0.25); } /* SVG inside button */ .tb-hero .tb-btn-primary svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); } /* SEO layer stays invisible */ /* Responsive adjustments */ @media (max-width: 768px) { .tb-hero { padding: 110px 0 120px; border-bottom-left-radius: 26px; border-bottom-right-radius: 26px; } } @media (max-width: 768px) { .tb-hero .tb-title { font-size: 36px; } } @media (max-width: 768px) { .tb-hero .tb-subtext { font-size: 18px; } } /* ============================================================    FINAL CTA v50 — EXACT MATCH TO HERO v50    Only affects: .tb-final-cta and its internal elements    ============================================================ */ /* Base Container (same as .tb-hero) */ .tb-final-cta { position: relative; padding: 140px 0 160px; background: linear-gradient(135deg, #28a745 0%, #2fbf62 40%, #1d7c35 100%); color: #fff; border-radius: 42px; overflow: hidden; box-shadow: 0 25px 80px rgba(0,0,0,0.18); isolation: isolate; } /* Floating Glow Layer (same as hero) */ .tb-final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.22), transparent 60%); opacity: 0.55; z-index: -1; } /* Soft Moving Overlay (same as hero) */ .tb-final-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(255,255,255,0.15) 0%, transparent 60%); mix-blend-mode: screen; opacity: 0.35; animation: finalcta-move 8s ease-in-out infinite alternate; z-index: -1; } @keyframes finalcta-move { 0% { transform: translateY(0px) translateX(0px); } 100% { transform: translateY(-35px) translateX(25px); } } /* Title (copied exactly from .tb-hero .tb-title) */ .tb-final-cta .tb-title { color: #fff !important; font-weight: 800; font-size: 52px; line-height: 1.15; margin-bottom: 28px; text-shadow: 0 2px 6px rgba(0,0,0,0.25); } /* Subtext (exact match to hero) */ .tb-final-cta .tb-subtext { color: rgba(255,255,255,0.92); font-size: 22px; max-width: 760px; margin-bottom: 38px; text-shadow: 0 1px 4px rgba(0,0,0,0.22); } /* CTA Button — EXACT hero button duplicate */ /* Always inline */ .tb-final-cta .tb-btn, .tb-final-cta .tb-btn-primary { display: inline-flex !important; width: auto !important; max-width: 100%; white-space: nowrap; justify-content: center; align-items: center; } /* Button base (identical to hero) */ .tb-final-cta .tb-btn-primary { background: #ffffff; color: #28a745; padding: 16px 36px; font-size: 18px; border-radius: 14px; font-weight: 700; box-shadow: 0 14px 32px rgba(0,0,0,0.18); transform: translateY(0); } /* Hover (same as hero) */ .tb-final-cta .tb-btn-primary:hover { transform: translateY(-6px); background: #f8fff9; box-shadow: 0 18px 45px rgba(0,0,0,0.25); } /* SVG styling */ /* Responsive rules — identical to hero */ @media (max-width: 768px) { .tb-final-cta { padding: 110px 0 120px; border-radius: 26px; } } @media (max-width: 768px) { .tb-final-cta .tb-title { font-size: 36px; } } @media (max-width: 768px) { .tb-final-cta .tb-subtext { font-size: 18px; } } @media (max-width: 768px) { .tb-final-cta .tb-btn { width: auto !important; display: inline-flex !important; white-space: nowrap; } } /* ============================================================    TLDR Premium Style — Applies ONLY to .tb-tldr    (No CSS for tb-section, tb-container, tb-title, no IDs)    ============================================================ */ .tb-tldr { background: linear-gradient(135deg, #f8fff9 0%, #eafff0 45%, #dfffe8 100%); padding: 26px 32px; border-radius: 18px; font-size: 20px; line-height: 1.65; font-weight: 500; color: #145c2d; box-shadow: 0 12px 32px rgba(0,0,0,0.06); border: 1px solid rgba(40,167,69,0.25); max-width: 900px; margin-inline: auto; position: relative; overflow: hidden; isolation: isolate; } /* Soft moving highlight (subtle hero-style motion) */ .tb-tldr::before { content: ""; position: absolute; inset: -40px -20px; background: radial-gradient(circle at 25% 30%, rgba(40,167,69,0.18), transparent 55%); opacity: 0.45; z-index: -1; animation: tldr-glow 7s ease-in-out infinite alternate; } @keyframes tldr-glow { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(18px) translateY(-18px); } } /* Bold text enhancement */ .tb-tldr strong { font-weight: 700; color: #0f4d25; } /* KPI Bar Container */ .tb-kpi-bar { padding: 60px 0; background: linear-gradient(135deg, #e9fff3 0%, #d2ffe7 40%, #c4ffdf 100%); border-radius: 26px; box-shadow: 0 12px 40px rgba(0,0,0,0.08); position: relative; overflow: hidden; isolation: isolate; } /* Light gradient glow behind items */ .tb-kpi-bar::before { content: ""; position: absolute; inset: -40px; background: radial-gradient(circle at 30% 30%, rgba(40,167,69,0.18), transparent 65%); opacity: 0.6; z-index: -1; } /* KPI Grid */ .tb-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; } /* KPI Card Items — premium color variations */ .tb-kpi-item { padding: 26px 20px; border-radius: 18px; background: linear-gradient( 135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.9) 45%, rgba(255,255,255,0.75) 100% ); border: 1px solid rgba(40,167,69,0.18); box-shadow: 0 12px 30px rgba(0,0,0,0.07); transition: transform 0.25s ease, box-shadow 0.25s ease; color: #134d2b; } /* Hover lift */ .tb-kpi-item:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(0,0,0,0.12); } /* KPI Title text */ .tb-kpi-item strong { font-size: 22px; font-weight: 800; display: block; color: #0e4224; margin-bottom: 6px; } /* KPI subtitle text */ .tb-kpi-item span { font-size: 18px; color: #1c7d3f; opacity: 0.95; } /* Responsive */ @media (max-width: 992px) { .tb-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } @media (max-width: 576px) { .tb-kpi-grid { grid-template-columns: 1fr; } } @media (max-width: 576px) { .tb-kpi-bar { border-radius: 20px; padding: 45px 0; } } /* ============================================================    LEAD MAGNET — Premium v50 Style    Only affects .tb-lead and internal classes    ============================================================ */ .tb-lead { position: relative; padding: 110px 0 130px; border-radius: 32px; box-shadow: 0 22px 60px rgba(0,0,0,0.08); overflow: hidden; isolation: isolate; } /* Glow layer */ .tb-lead::before { content: ""; position: absolute; inset: 0; opacity: 0.55; z-index: -1; animation: lead-glow 9s ease-in-out infinite alternate; } @keyframes lead-glow { 0% { transform: translateX(0px) translateY(0px); } 100% { transform: translateX(18px) translateY(-18px); } } /* Subtext styling (safe — internal class) */ .tb-lead .tb-subtext { max-width: 760px; font-size: 20px; line-height: 1.65; color: #145b2e; margin-bottom: 40px; } /* ============================================================    SECONDARY BUTTON — Premium Version    ============================================================ */ .tb-lead .tb-btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 15px 34px; font-size: 18px; font-weight: 700; border-radius: 14px; text-decoration: none; cursor: pointer; background: #ffffff; color: #28a745; border: 2px solid rgba(40,167,69,0.35); box-shadow: 0 10px 25px rgba(0,0,0,0.10); transition: all 0.25s ease; } /* Hover effect (premium subtle lift) */ .tb-lead .tb-btn-secondary:hover { border-color: rgba(40,167,69,0.55); transform: translateY(-5px); box-shadow: 0 16px 38px rgba(0,0,0,0.14); } /* Responsive Tweaks */ @media (max-width: 768px) { .tb-lead { border-radius: 24px; padding: 80px 0 90px; } } @media (max-width: 768px) { .tb-lead .tb-subtext { font-size: 18px; } } @media (max-width: 768px) { .tb-lead .tb-btn-secondary { font-size: 17px; padding: 14px 28px; } } /* ============================================================ LAYOUT ============================================================ */ .cb-layout { display: flex; align-items: flex-start; gap: 2rem; } /* ============================================================ COMPACT ASIDE ============================================================ */ .cb-aside { width: 24%; position: sticky; top: 110px; display: flex; flex-direction: column; gap: 1.4rem; padding-right: 10px; max-height: calc(100vh - 130px); overflow-y: auto; scrollbar-gutter: stable both-edges; } /* Ultra-thin minimal scrollbar */ /* ============================================================ PREMIUM ACCENT LINE (green vertical bar) ============================================================ */ /* ============================================================ ASIDE CARDS — Apple-style ============================================================ */ .cb-aside-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.2rem 1.2rem 1.2rem 1.3rem; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: all .22s ease; } .cb-aside-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.07); } /* ============================================================ TITLES ============================================================ */ .cb-aside-card h4 { margin: 0 0 .6rem; font-size: 1rem; font-weight: 700; color: #111; } /* ============================================================ LISTS ============================================================ */ .cb-aside-list { margin: 0; padding: 0; list-style: none; } .cb-aside-list li { margin-bottom: .45rem; font-size: .9rem; color: #444; } /* ============================================================ MOBILE BEHAVIOR — aside BEFORE main ============================================================ */ @media (max-width: 992px) { .cb-layout { flex-direction: column; } } @media (max-width: 992px) { .cb-aside { width: 100%; position: static; overflow-y: visible; max-height: none; padding-right: 0; order: -1; } } /* Remove bullets globally */ .cb-aside-card.v5-internal-links ul { list-style: none !important; margin: 0; padding: 0; display: flex !important; flex-wrap: wrap !important; gap: .5rem .55rem; } /* Reset li */ .cb-aside-card.v5-internal-links li { margin: 0 !important; padding: 0 !important; } /* Pill style */ .cb-aside-card.v5-internal-links a { display: inline-flex; align-items: center; justify-content: center; padding: .38rem .8rem; font-size: .82rem; font-weight: 600; border-radius: 999px; background: #ffffff; color: #145c32; border: 1px solid #e2e8ec; white-space: nowrap; flex-shrink: 1; max-width: 150px; text-decoration: none; transition: all .2s ease; } /* Hover */ .cb-aside-card.v5-internal-links a:hover { background: rgba(40,167,69,.05); border-color: #cfe8d2; } /* Card styling */ .cb-aside-card { background: #ffffff; border-radius: 16px; padding: 1.4rem 1.6rem 1.3rem; border: 1px solid #eef1f3; box-shadow: 0 2px 6px rgba(0,0,0,.05); transition: box-shadow .25s ease, border-color .25s ease; } .cb-aside-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); border-color: #dce6df; } /* Header */ .cb-aside-title { font-size: 1rem; font-weight: 700; margin-bottom: .85rem; } /* List reset */ .cb-aside-list { list-style: none; margin: 0; padding: 0; } /* List items */ .cb-aside-list li { position: relative; padding: .45rem 0 .45rem 1.2rem; font-size: .88rem; color: #2d3a39; line-height: 1.45; border-bottom: 1px solid #f2f3f5; } .cb-aside-list li:last-child { border-bottom: none; } /* Green micro-accent bullet */ .cb-aside-list li::before { content: ""; position: absolute; left: 0; top: .8rem; width: 6px; height: 6px; border-radius: 50%; background: #28a745; opacity: .6; } /* On hover */ .cb-aside-list li:hover { color: #145c32; } /* ================================    LIST ================================ */ .v5-list { display: flex; flex-direction: column; gap: 1.6rem; } /* ================================    ITEM ================================ */ .v5-item { padding: 1.4rem 1.6rem; border-radius: 14px; background: #ffffff; border: 1px solid #e7ecef; position: relative; transition: all .25s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } /* Left accent bar */ .v5-item::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; border-radius: 4px 0 0 4px; background: #28a745; opacity: .22; transition: all .25s ease; } .v5-item:hover { transform: translateY(-3px); border-color: #cfe8d2; box-shadow: 0 10px 26px rgba(0,0,0,0.05); } .v5-item:hover::before { opacity: .9; } /* ================================    TEXT ================================ */ .v5-item h5 { margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 700; } .v5-item h5 a { text-decoration: none; color: #222; } .v5-item p { margin: 0; font-size: .95rem; line-height: 1.55; color: #48545b; } /* UNIVERSAL pill layout for both sections */ .v5-pill-container, .cb-aside-card.v5-internal-links ul { list-style: none !important; margin: 0; padding: 0; display: flex !important; flex-wrap: wrap !important; gap: .5rem .55rem; } /* Apply pill style to all aside links */ .v5-pill-container a, .cb-aside-card.v5-internal-links a { display: inline-flex; align-items: center; justify-content: center; padding: .38rem .8rem; font-size: .82rem; font-weight: 600; border-radius: 999px; background: #ffffff; color: #145c32; border: 1px solid #e2e8ec; white-space: nowrap; flex-shrink: 1; max-width: 150px; text-decoration: none; transition: all .2s ease; } /* Hover effect */ .v5-pill-container a:hover, .cb-aside-card.v5-internal-links a:hover { background: rgba(40,167,69,.05); border-color: #cfe8d2; } /* Active spy highlight */ .v5-pill-container a.active, .v5-pill-container a.spy-active { background: #e8f6ed; border-color: #28a745 !important; color: #28a745 !important; } /* V250 Slim SaaS Premium */ /* UNIVERSAL PILL ROW */ .pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.2rem; margin-top: 1.2rem; } /* UNIVERSAL PILL */ .pill { display: inline-block; padding: 0.55rem 1.25rem; background: #ffffff; border-radius: 40px; font-size: 0.95rem; font-weight: 600; color: #1f1f1f; text-decoration: none; border: 1px solid rgba(40,167,69,0.35); box-shadow: 0 0 0 1px rgba(40,167,69,0.25), 0 2px 10px rgba(40,167,69,0.15), inset 0 0 18px rgba(40,167,69,0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: all .28s ease; } /* HOVER */ .pill:hover { color: #28a745; border-color: #28a745; box-shadow: 0 0 0 1px #28a745, 0 2px 14px rgba(40,167,69,0.45), inset 0 0 24px rgba(40,167,69,0.25); transform: translateY(-3px); } /* wrapper forces centering regardless of parent rules */ .h2-center-wrap { text-align: center !important; width: 100%; } /* h2 block styles */ .h2-center { position: relative; display: inline-block; padding-bottom: 1.25rem; margin-bottom: 1em; } /* underline */ .h2-center::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 62px; height: 3px; background: #28a745; border-radius: 2px; } /* ============================    LEFT-ALIGNED H2 Underline    ============================ */ .h2-left { position: relative; display: inline-block; padding-bottom: 1.25rem; text-align: left !important; } .h2-left::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 62px; height: 3px; background: #28a745; border-radius: 2px; } /* =====================================================    GLOBAL KPI V1000 — Holographic Neon Matrix    (Liquid Glass + Parallax Tilt + Motion Noise) ===================================================== */ .kpi1000-section { padding: 4.5rem 0 5rem; position: relative; overflow: hidden; background: #f8fdfb; } /* Container */ .kpi1000-container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; } /* HOLOGRAPHIC BACKLAYERS */ .kpi1000-holo { position: absolute; width: 150%; height: 150%; filter: blur(140px); opacity: 0.55; pointer-events: none; animation: holoBreath 10s ease-in-out infinite alternate; } .kpi1000-holo-1 { top: -20%; left: -20%; background: radial-gradient(circle at 30% 30%, rgba(40,167,69,0.32), transparent 72%); } .kpi1000-holo-2 { bottom: -20%; right: -20%; background: radial-gradient(circle at 75% 75%, rgba(30,220,140,0.25), transparent 75%); } @keyframes holoBreath { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.18) translate(3%,2%); opacity: .65; } } /* NOISE OVERLAY */ .kpi1000-noise { position: absolute; inset: 0; opacity: 0.08; pointer-events: none; mix-blend-mode: overlay; background-image: url("https://grainy-gradients.vercel.app/noise.png"); } /* GRID */ .kpi1000-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.8rem; } @media (max-width:992px) { .kpi1000-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width:600px) { .kpi1000-grid { grid-template-columns: 1fr; } } /* CARDS */ .kpi1000-card { padding: 2.2rem 1.6rem; background: rgba(255,255,255,0.48); backdrop-filter: blur(22px) saturate(200%); -webkit-backdrop-filter: blur(22px) saturate(200%); border-radius: 22px; border: 1px solid rgba(180,220,190,0.55); box-shadow: 0 4px 18px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,0.65), inset 0 0 14px rgba(40,167,69,0.10); transition: all .32s ease; text-align: center; transform-style: preserve-3d; cursor: default; } /* HOVER */ .kpi1000-card:hover { background: rgba(255,255,255,0.70); transform: translateY(-9px) scale(1.018); border-color: rgba(40,167,69,0.38); box-shadow: 0 10px 32px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(40,167,69,0.12), inset 0 0 22px rgba(40,167,69,0.10), 0 0 22px rgba(30,210,130,0.28); } /* NUMBERS */ .kpi1000-number { font-size: 2.25rem; font-weight: 800; margin-bottom: .35rem; background: linear-gradient(135deg,#28a745,#25d67c,#1ea85a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .kpi1000-static { font-size: 2.2rem; } /* LABELS */ .kpi1000-label { font-size: .97rem; color: #4c565d; margin: 0; } .b-color li span { color: #000; font-weight: 500; text-decoration: underline; } .light-background { --surface-color: #ffffff; } :root { scroll-behavior: smooth; } a { color: #28a745; text-decoration: none; transition: 0.3s; } .hero { position: relative; padding-top: 160px; background: linear-gradient(135deg,color-mix(in srgb,var(--accent-color),transparent 95%) 50%,color-mix(in srgb,var(--accent-color),transparent 98%) 25%,transparent 50%); background: #fff0; } .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 90% 10%,color-mix(in srgb,#28a745,transparent 92%),transparent 40%); pointer-events: none; } .hero .hero-content { position: relative; z-index: 1; } .hero .hero-content h1 { font-size: 3.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -1.19px; margin-bottom: 1.5rem; color: var(--heading-color); } @media (max-width:992px) { .hero .hero-content { text-align: center; margin-bottom: 3rem; } } @media (max-width:992px) { .hero .hero-content h1 { font-size: 2.5rem; } } @media (max-width:575px) { .hero .hero-content h1 { font-size: 2rem; } } .hero .hero-image { position: relative; text-align: center; z-index: 1; } .hero .hero-image img { max-width: 100%; height: auto; } .hero .customers-badge { position: absolute; bottom: 10px; right: 30px; background-color: var(--surface-color); padding: 1rem; border-radius: 10px; box-shadow: 0 5px 20px rgb(0 0 0 / .1); max-width: 300px; animation: float-badge 3s ease-in-out infinite; will-change: transform; } .hero .customers-badge .customer-avatars { display: flex; align-items: center; margin-bottom: .5rem; } .hero .customers-badge .avatar { width: 35px; height: 35px; border-radius: 50%; border: 2px solid var(--surface-color); margin-left: -8px; } .hero .customers-badge .avatar:first-child { margin-left: 0; } .hero .customers-badge .avatar.more { background-color: #28a745; color: var(--contrast-color); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; } .hero .customers-badge p { font-size: .875rem; color: color-mix(in srgb,var(--default-color),transparent 40%); } @media (max-width:992px) { .hero .customers-badge { position: static; margin: 1rem auto; max-width: 250px; } } @keyframes float-badge { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .features-cards { --default-color: #555; --heading-color: #333; } .features-cards .feature-box { height: 100%; padding: 40px 30px; border-radius: 0; } .features-cards .feature-box i { font-size: 44px; display: inline-block; line-height: 0; color: #28a745; margin-bottom: 20px; } .features-cards .feature-box h4 { font-size: 20px; font-weight: 700; margin: 0 0 10px 0; } .features-cards .feature-box p { font-size: 15px; margin-bottom: 0; } .features-cards .feature-box.orange { background-color: #fff3e2; } .features-cards .feature-box.orange i { color: #edb86e; } .features-cards .feature-box.blue { background-color: #deedfd; } .features-cards .feature-box.blue i { color: #28a745; } .features-cards .feature-box.green { background-color: #d5f1e4; } .features-cards .feature-box.green i { color: #48c88a; } .features-cards .feature-box.red { background-color: #fdeded; } .features-cards .feature-box.red i { color: #f28484; } :root { --logo-height: 60px; --logo-gap: 60px; --marquee-speed: 28s; --fade-width: 12.5%; } /* layout */ .logo-slider { position: relative; width: 100%; overflow: hidden; padding: 24px 0; } .logo-track { display: flex; align-items: center; gap: var(--logo-gap); animation: marquee var(--marquee-speed) linear infinite; will-change: transform; } /* images */ .logo-track img { height: var(--logo-height); width: auto; display: block; opacity: 0.65; filter: grayscale(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease, filter .25s ease; transform-origin: center; } /* hover / focus */ .logo-track img:hover, .logo-track img:focus { transform: scale(1.08) translateY(-2px); opacity: 1; filter: none; outline: none; } /* small parallax: slightly different transform for even/odd items for a livelier effect */ .logo-track img:nth-child(odd) { transform: translateY(0) scale(1); } .logo-track img:nth-child(even) { transform: translateY(0) scale(1); } /* fade masks (left + right) */ .logo-fade { position: absolute; top: 0; bottom: 0; width: var(--fade-width); pointer-events: none; z-index: 2; } .logo-fade-left { left: 0; background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.0) 40%); } .logo-fade-right { right: 0; background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0.0) 40%); } /* If your site background is not white, replace #fff above with your container background color (e.g. #f7f6f3). */ /* marquee animation: translate by -50% (because set duplicated set) */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Accessibility: reduce motion */ @media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } } @media (prefers-reduced-motion: reduce) { .logo-track img { transition: none; } } /* Responsiveness */ @media (max-width: 992px) { :root { --logo-gap: 44px; --logo-height: 52px; --marquee-speed: 26s; } } @media (max-width: 992px) { .logo-fade { width: 16%; } } @media (max-width: 576px) { :root { --logo-gap: 30px; --logo-height: 44px; --marquee-speed: 22s; } } @media (max-width: 576px) { .logo-fade { width: 18%; } } /* Safety: ensure the track never collapses in constrained builder environments */ .logo-track { min-width: 200%; } /* ensures enough width for duplicated set */ /* Wrapper for fade edges and nicer look */ /* Fade edges – subtle Netflix effect */ /* Core layout */ .tb-reviews-carousel { display: flex; gap: 24px; overflow: hidden; scroll-behavior: smooth; will-change: transform; } .tb-review-card { min-width: 350px; max-width: 350px; background: #fff; padding: 24px; border: 1px solid #eee; border-radius: 14px; transition: transform .35s ease; box-shadow: 0 4px 14px rgba(0,0,0,0.06); } /* CENTER CARD POP */ /* Avatar */ .tb-review-avatar { width: 68px; height: 68px; border-radius: 50%; border: 2px solid #28a745; object-fit: cover; } /* Name + Role */ .tb-review-name { font-size: 17px; font-weight: 600; } .tb-review-role { color: #6c757d; font-size: 14px; } /* Stars */ .tb-review-stars i { color: #ffc107; font-size: 17px; } /* Text */ .tb-review-text { font-size: 15px; color: #333; line-height: 1.55; } /* Navigation arrows */ .tb-reviews-nav { position: absolute; top: 50%; transform: translateY(-50%); background: #ffffff; border: 1px solid #ccc; width: 46px; height: 46px; border-radius: 50%; font-size: 20px; color: #28a745; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .25s ease; z-index: 20; } .tb-reviews-nav:hover { background: #28a745; color: #fff; border-color: #28a745; } .tb-reviews-prev { left: -10px; } .tb-reviews-next { right: -10px; } /* Mobile */ @media (max-width: 768px) { .tb-review-card { min-width: 80%; max-width: 80%; } } @media (max-width: 768px) { .tb-reviews-prev { left: 5px; } } @media (max-width: 768px) { .tb-reviews-next { right: 5px; } } /* -----------------------------------------------------------    CONSULTING COMPONENT FRAMEWORK — TechBrot (cb-*)    Premium UI System for Industry Cards, Integrations,    Use Cases, Issues, Framework, Wizard & Technical sections ----------------------------------------------------------- */ /* Base Typography & Structure ----------------------------- */ .cb-subtext { max-width: 760px; text-align: left; margin: 0 auto 2.4rem; } /* -----------------------------------------------------------    Grid System (Reusable) ----------------------------------------------------------- */ /* 4-column premium grid */ /* -----------------------------------------------------------    Card Base Styles ----------------------------------------------------------- */ /* Card hover premium effect */ /* -----------------------------------------------------------    Technical Lists & Wizard Cards ----------------------------------------------------------- */ /* -----------------------------------------------------------    4-Step Framework Cards ----------------------------------------------------------- */ /* -----------------------------------------------------------    Wizard Block ----------------------------------------------------------- */ /* -----------------------------------------------------------    Integrations Footnote ----------------------------------------------------------- */ .cb-footnote { text-align: center; margin-top: 1.8rem; font-size: .92rem; opacity: .8; } /* -----------------------------------------------------------    Responsive Tweaks ----------------------------------------------------------- */ @media (max-width: 768px) { .cb-heading { font-size: 1.55rem; } } /* Layout Wrapper */ .cb-layout { display: flex; align-items: flex-start; gap: 2.8rem; } /* Main Column */ .cb-main { width: 70%; } /* Mobile */ @media (max-width: 991px) { .cb-layout { flex-direction: column; } } @media (max-width: 991px) { .cb-main, .cb-aside { width: 100%; position: relative; top: auto; } } /* TEAM GRID LAYOUT */ /* CARD */ /* AVATAR */ /* TEXT */ /* RESPONSIVE AVATAR SIZING */ /* ---------------------------------------------    PREMIUM V5 — TECHBROT INTEGRATIONS GRID    --------------------------------------------- */ :root { --v5-bg: #ffffff; --v5-border: rgba(0,0,0,0.07); --v5-hover-border: rgba(0,0,0,0.12); --v5-shadow: 0 8px 28px rgba(0,0,0,0.06); --v5-hover-shadow: 0 12px 38px rgba(0,0,0,0.10); --v5-radius: 18px; --v5-accent: #28a745; } /* Grid Layout */ .v5-integrations { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 1.8rem; } /* Card Base */ .v5-integration-card { display: flex; flex-direction: column; align-items: flex-start; padding: 1.6rem 1.5rem; background: var(--v5-bg); border: 1px solid var(--v5-border); border-radius: var(--v5-radius); text-decoration: none; transition: all .25s ease; position: relative; overflow: hidden; } /* Hover Effects */ .v5-integration-card:hover { border-color: var(--v5-hover-border); box-shadow: var(--v5-hover-shadow); transform: translateY(-4px); } /* Elegant background glow on hover */ .v5-integration-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at top right, rgba(40,167,69,0.10), transparent 65% ); opacity: 0; transition: opacity .3s ease; } .v5-integration-card:hover::before { opacity: 1; } /* Icon Layer */ .v5-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; margin-bottom: .95rem; } .v5-icon svg { width: 42px; height: 42px; transition: transform .28s ease; } .v5-integration-card:hover .v5-icon svg { transform: scale(1.08); } /* Label */ .v5-label { font-size: 1.05rem; font-weight: 600; color: #222; line-height: 1.35; } /* Make grid tighter on very small screens */ @media (max-width: 480px) { .v5-integrations { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } @media (max-width: 480px) { .v5-integration-card { padding: 1.3rem 1.2rem; } } /* ---------------------------    V11 INDUSTRY GLASS SYSTEM ---------------------------- */ .v11-industries { --glass-bg: rgba(255,255,255,0.55); --glass-blur: blur(14px); --glass-border: rgba(255,255,255,0.4); --shadow: 0 8px 28px rgba(0,0,0,0.08); --shadow-hover: 0 12px 34px rgba(0,0,0,0.12); --radius: 18px; } /* Category Titles */ .v11-cat-title { font-size: 1.25rem; font-weight: 700; margin: 1.4rem 0 .7rem; color: #222; } /* Auto-flow grid with pill items */ .v11-industry-grid { display: flex; flex-wrap: wrap; gap: 1rem; } .v11-item { display: inline-flex; align-items: center; gap: .75rem; padding: .85rem 1.3rem; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius); text-decoration: none; box-shadow: var(--shadow); transition: all .25s ease; } .v11-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(255,255,255,0.6); } .v11-disabled { opacity: .45; pointer-events: none; } /* Icon Colors — Industry Specific */ .v11-icon svg { width: 24px; height: 24px; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .v11-eco svg { stroke: #00965e; } .v11-retail svg { stroke: #28a745; } .v11-home svg { stroke: #ff7f50; } .v11-logistics svg { stroke: #007bff; } .v11-construction svg { stroke: #cc7722; } .v11-manufacturing svg { stroke: #8a2be2; } .v11-realestate svg { stroke: #c0392b; } .v11-franchise svg { stroke: #6f42c1; } .v11-health svg { stroke: #e74c3c; } .v11-nonprofit svg { stroke: #1abc9c; } .v11-prof svg { stroke: #555; } /* Label */ .v11-label { font-size: 1rem; font-weight: 600; color: #222; } /* Responsive Tweaks */ @media (max-width: 540px) { .v11-item { padding: .75rem 1rem; } } @media (max-width: 540px) { .v11-label { font-size: .95rem; } } /* ===================================================V20 — ISSUES SECTION (RED DIAGNOSTIC CARDS)=================================================== */ .v20-issues { position: relative; overflow: hidden; } .v20-issues::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(217,83,79,0.08), transparent 55%); pointer-events: none; } .v20-issues .tb-subtext { max-width: 640px; } .v20-issues-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; margin-top: 1.6rem; } .v20-issue-card { display: flex; align-items: flex-start; gap: 0.95rem; padding: 1.3rem 1.35rem; border-radius: 16px; background: rgba(255,255,255,0.9); border: 1px solid rgba(217,83,79,0.16); box-shadow: 0 10px 28px rgba(0,0,0,0.05); position: relative; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease; } .v20-issue-card::after { content: ""; position: absolute; inset-inline-end: -35%; inset-block-start: -35%; width: 160px; height: 160px; background: radial-gradient(circle, rgba(217,83,79,0.18), transparent 70%); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .v20-issue-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0,0,0,0.10); border-color: rgba(217,83,79,0.35); background: #ffffff; } .v20-issue-card:hover::after { opacity: 1; } .v20-issue-icon { width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 0%, #fff, rgba(217,83,79,0.1)); flex-shrink: 0; } .v20-issue-icon .qb-check path { fill: #d9534f; } .v20-issue-body { flex: 1; } .v20-issue-title { margin: 0 0 .25rem; font-size: 0.98rem; font-weight: 600; color: #222; } .v20-issue-text { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #555; } /* ===================================================V20 — STAGE FLOW (BLUE ROADMAP)=================================================== */ .v20-stages { position: relative; } .v20-stage-flow { position: relative; display: grid; gap: 1.2rem; margin-top: 1.7rem; } @media (min-width: 900px) { .v20-stage-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .v20-stage-item { position: relative; } .v20-stage-pill { height: 100%; border-radius: 18px; padding: 1.15rem 1.1rem 1.2rem; background: radial-gradient(circle at top left, rgba(0,123,255,0.12), rgba(255,255,255,0.95)); border: 1px solid rgba(0,123,255,0.18); display: flex; align-items: flex-start; gap: 0.8rem; box-shadow: 0 10px 26px rgba(0,0,0,0.04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; } .v20-stage-step { flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.86rem; font-weight: 700; color: #0d2b4f; background: #e3f0ff; box-shadow: 0 6px 14px rgba(0,123,255,0.25); } .v20-stage-body { flex: 1; } .v20-stage-title { margin: 0 0 .25rem; font-size: 0.97rem; font-weight: 600; color: #13233a; } .v20-stage-text { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #4a5668; } .v20-stage-pill:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,0.12); border-color: rgba(0,123,255,0.32); background: radial-gradient(circle at top left, rgba(0,123,255,0.16), #ffffff); } /* connector line only on desktop */ @media (min-width: 900px) { .v20-stage-flow::before { content: ""; position: absolute; inset-inline: 12%; top: 1.4rem; height: 2px; background: linear-gradient(90deg, rgba(0,123,255,0.18), rgba(0,123,255,0.05)); z-index: 0; } } @media (min-width: 900px) { .v20-stage-item { z-index: 1; } } /* ===================================================V20 — TECHNICAL GRID (GREEN PROFESSIONAL CARDS)=================================================== */ .v20-technical { position: relative; } .v20-tech-grid { margin-top: 1.7rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.3rem; } .v20-tech-card { position: relative; border-radius: 18px; padding: 1.25rem 1.35rem; background: linear-gradient(135deg, rgba(40,167,69,0.05), rgba(255,255,255,0.98)); border: 1px solid rgba(40,167,69,0.18); box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: flex; align-items: flex-start; gap: 0.85rem; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .v20-tech-card::before { content: ""; position: absolute; inset-block: -20%; inset-inline-start: -40%; width: 120px; background: radial-gradient(circle, rgba(40,167,69,0.25), transparent 70%); opacity: 0; pointer-events: none; transition: opacity .25s ease; } .v20-tech-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0,0,0,0.10); border-color: rgba(40,167,69,0.35); } .v20-tech-card:hover::before { opacity: 1; } .v20-tech-icon { width: 38px; height: 38px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(40,167,69,0.09); flex-shrink: 0; } .v20-tech-icon svg { width: 22px; height: 22px; fill: none; stroke: none; } .v20-tech-icon svg rect, .v20-tech-icon svg circle, .v20-tech-icon svg path { fill: #28a745; stroke: #28a745; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .v20-tech-body { flex: 1; } .v20-tech-title { margin: 0 0 .25rem; font-size: 0.98rem; font-weight: 600; color: #1f3a29; } .v20-tech-text { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #46564b; } /* mobile spacing tweaks */ @media (max-width: 575px) { .v20-issues-grid { gap: 1.1rem; } } @media (max-width: 575px) { .v20-tech-grid { gap: 1.05rem; } } @media (max-width: 575px) { .v20-stage-pill { padding: 1.05rem 1rem 1.15rem; } } /* ---------------------------------------------------    V32 — Ultra Premium Glass Testimonials (HTML unchanged)    --------------------------------------------------- */ /* GRID LAYOUT — Responsive 4-4-4 → 6-6 → 12 */ .v30-t-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; } .v30-t-card { flex: 0 0 calc(33.333% - 2rem); /*desktop: 3 per row;*/ } /* Tablet: 2 per row */ @media (max-width: 992px) { .v30-t-card { flex: 0 0 calc(50% - 2rem); } } /* Mobile: full width */ @media (max-width: 576px) { .v30-t-card { flex: 0 0 100%; } } /* ---------------------------------------------------    CARD GLASS STYLE — V32    --------------------------------------------------- */ .v30-t-card { position: relative; background: rgba(255,255,255,0.55); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border-radius: 26px; border: 1px solid rgba(255,255,255,0.45); padding: 2.6rem 2rem; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 18px 38px rgba(0,0,0,0.08), 0 8px 18px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,0.6); transition: transform .25s ease, box-shadow .25s ease; } .v30-t-card:hover { transform: translateY(-6px); box-shadow: 0 28px 55px rgba(0,0,0,0.12), 0 12px 26px rgba(0,0,0,0.06); } /* ---------------------------------------------------    AMBIENT LIGHT GLOW    --------------------------------------------------- */ .v30-t-card::before { content: ""; position: absolute; top: -30%; left: -20%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(40,167,69,0.28), transparent 70%); opacity: 0; transition: opacity .35s ease; } .v30-t-card:hover::before { opacity: 1; } /* ---------------------------------------------------    AVATAR + RING    --------------------------------------------------- */ .v30-t-avatar-wrap { position: relative; width: 86px; height: 86px; border-radius: 50%; overflow: hidden; margin-bottom: 1.4rem; flex-shrink: 0; } /* glowing ring */ .v30-t-avatar-ring { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient( from 0deg, #28a745, #73e68a, #28a745 ); filter: blur(8px); z-index: -1; opacity: .25; } /* avatar image */ .v30-t-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* ---------------------------------------------------    TEXT    --------------------------------------------------- */ .v30-t-text { font-size: 1.05rem; line-height: 1.55; color: #1e1e1e; margin-bottom: 1.1rem; font-weight: 500; } .v30-t-name { font-weight: 600; font-size: 0.95rem; color: #1f3a29; margin-bottom: 0.25rem; } .v30-t-meta { font-size: 0.82rem; color: #6c7a70; } /* ----------------------------------------------    V40 ARTICLE GRID — GLASS + THUMBNAILS + 3D DEPTH ---------------------------------------------- */ /* GRID */ /* CARD BASE */ /* Hover 3D lift + halo glow */ /* THUMBNAIL */ /* TEXT */ /* MOBILE */ /* ============================================================    V42 GRID (unchanged) ============================================================ */ .v42-hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 22px; overflow: hidden; background: #ffffff; border: 1px solid #e6eaed; box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 10px 26px rgba(0,0,0,0.05); } /* ============================================================    CARD + GLASS ============================================================ */ .v42-hiw-card { position: relative; display: flex; flex-direction: column; padding: 2rem 1.5rem; gap: 1.2rem; background: rgba(255,255,255,0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all .28s ease; border-right: 1px solid #e1e5e8; } .v42-hiw-card:last-child { border-right: none; } .v42-hiw-card:hover { background: rgba(255,255,255,0.92); border-color: #d1e5d3 !important; transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(40,167,69,0.10), 0 10px 26px rgba(0,0,0,0.05); } /* ============================================================    V50 CONNECTOR LINES (desktop only) ============================================================ */ /* Main horizontal connector */ @media (min-width: 993px) { .v42-hiw-card:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -1px; width: 40px; height: 2px; background: linear-gradient(90deg, #28a745 0%, rgba(40,167,69,0.25) 100%); transform: translateY(-50%); opacity: 0.45; } } /* Animated glow dot at the end */ @media (min-width: 993px) { .v42-hiw-card:not(:last-child)::before { content: ""; position: absolute; top: 50%; right: 35px; width: 10px; height: 10px; border-radius: 50%; background: #28a745; transform: translateY(-50%); opacity: 0.9; animation: v50-pulse 2s infinite ease-in-out; } } @keyframes v50-pulse { 0% { transform: translateY(-50%) scale(0.7); opacity: 0.5; } 50% { transform: translateY(-50%) scale(1); opacity: 1; } 100% { transform: translateY(-50%) scale(0.7); opacity: 0.5; } } /* ============================================================    TOP SECTION — ICON + TITLE INLINE ============================================================ */ .v42-hiw-top { display: flex; align-items: center; gap: 1rem; } .v42-hiw-icon { width: 64px; height: 64px; border-radius: 16px; background: #f4faf6; border: 1px solid #dfe9e1; display: flex; justify-content: center; align-items: center; } .v42-hiw-icon img { width: 35px; height: 35px; } .v42-hiw-title { font-size: 1.1rem; font-weight: 700; margin: 0; line-height: 1.35; } /* ============================================================    BODY TEXT ============================================================ */ .v42-hiw-text { font-size: .97rem; color: #475058; margin: 0; line-height: 1.55; width: 100%; } /* ============================================================    RESPONSIVE ============================================================ */ @media (max-width: 992px) { .v42-hiw-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 992px) { .v42-hiw-card { border-right: none !important; border-bottom: 1px solid #e1e5e8; } } @media (max-width: 992px) { .v42-hiw-card:last-child { border-bottom: none !important; } } @media (max-width: 600px) { .v42-hiw-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .v42-hiw-card { border-bottom: 1px solid #e1e5e8 !important; } } @media (max-width: 600px) { .v42-hiw-card:last-child { border-bottom: none !important; } } /* ============================================================    V42 TEAM GRID — same structure as v42-hiw-grid ============================================================ */ .v42-team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-radius: 22px; overflow: hidden; background: #ffffff; border: 1px solid #e6eaed; box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 10px 26px rgba(0,0,0,0.05); } /* ============================================================    TEAM CARD ============================================================ */ .v42-team-card { display: flex; flex-direction: column; padding: 2rem 1.6rem; gap: 1.2rem; background: rgba(255,255,255,0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all .28s ease; position: relative; border-right: 1px solid #e1e5e8; } .v42-team-card:last-child { border-right: none; } .v42-team-card:hover { background: rgba(255,255,255,0.92); border-color: #d1e5d3 !important; transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(40,167,69,0.10), 0 10px 26px rgba(0,0,0,0.05); } /* ============================================================    AVATAR + TITLE INLINE (matches v42-hiw-top) ============================================================ */ .v42-team-top { display: flex; align-items: center; gap: 1rem; } /* Avatar */ .v42-team-avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 2px solid #dfe9e1; background: #f4faf6; flex-shrink: 0; } .v42-team-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Name + Sub-role */ .v42-team-name { margin: 0; font-size: 1.05rem; font-weight: 700; } .v42-team-role { margin: 0; font-size: .9rem; color: #6a7b71; } /* Description */ .v42-team-text { font-size: .97rem; color: #475058; margin: 0; line-height: 1.55; } /* ============================================================    RESPONSIVE BEHAVIOR (same as V42 HOW-IT-WORKS) ============================================================ */ @media (max-width: 992px) { .v42-team-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 992px) { .v42-team-card { border-right: none !important; border-bottom: 1px solid #e1e5e8; } } @media (max-width: 992px) { .v42-team-card:last-child { border-bottom: none !important; } } @media (max-width: 600px) { .v42-team-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .v42-team-card { border-bottom: 1px solid #e1e5e8 !important; } } @media (max-width: 600px) { .v42-team-card:last-child { border-bottom: none !important; } } /* ============================================================    V42 RESOURCE GRID — same structure as v42-team-grid ============================================================ */ .v42-resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 22px; overflow: hidden; background: #ffffff; border: 1px solid #e6eaed; box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 10px 26px rgba(0,0,0,0.05); } /* ============================================================    RESOURCE CARD ============================================================ */ .v42-resource-card { display: flex; flex-direction: column; padding: 2rem 1.6rem; gap: 1.2rem; background: rgba(255,255,255,0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-right: 1px solid #e1e5e8; transition: all .28s ease; } .v42-resource-card:last-child { border-right: none; } .v42-resource-card:hover { background: rgba(255,255,255,0.92); border-color: #d1e5d3 !important; transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(40,167,69,0.10), 0 10px 26px rgba(0,0,0,0.05); } /* ============================================================    TOP ROW — icon + title inline ============================================================ */ .v42-resource-top { display: flex; align-items: center; gap: 0.8rem; } .v42-resource-icon { font-size: 1.65rem; line-height: 1; } .v42-resource-title { margin: 0; font-size: 1.05rem; font-weight: 700; } /* ============================================================    TEXT ============================================================ */ .v42-resource-text { margin: 0; font-size: .97rem; color: #475058; line-height: 1.55; } /* ============================================================    BUTTON ============================================================ */ .v42-resource-btn { display: inline-block; margin-top: auto; padding: 0.55rem 1.2rem; border: 1px solid #28a745; color: #28a745; border-radius: 8px; font-size: .9rem; font-weight: 600; text-decoration: none; transition: all .25s ease; } .v42-resource-btn:hover { background: #28a745; color: #ffffff; } /* ============================================================    RESPONSIVE ============================================================ */ @media (max-width: 992px) { .v42-resource-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 992px) { .v42-resource-card { border-right: none !important; border-bottom: 1px solid #e1e5e8; } } @media (max-width: 600px) { .v42-resource-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .v42-resource-card { border-bottom: 1px solid #e1e5e8 !important; } } @media (max-width: 600px) { .v42-resource-card:last-child { border-bottom: none !important; } } /* ================================    V5 WRAPPER ================================ */ /* ================================    HEADINGS ================================ */ .v5-title { font-size: 1.8rem; font-weight: 700; margin: 0; } .v5-subtext { margin: 0; font-size: 1rem; max-width: 760px; line-height: 1.6; color: #475058; } /* Container */ .cmpX-table { width: 100%; background: #ffffff; border: 1px solid #eef1f4; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 22px rgba(0,0,0,0.06); } /* Rows */ .cmpX-row { display: grid; grid-template-columns: 30% 35% 35%; padding: 1.3rem 1.4rem; border-bottom: 1px solid #f1f3f5; align-items: start; transition: background .15s ease; } .cmpX-row:hover { background: #fafdfb; } .cmpX-row:last-child { border-bottom: none; } /* Head row */ .cmpX-head { background: linear-gradient(to right, #f5fbf7, #ffffff); font-weight: 700; } .cmpX-tag { background: #e8f6ed; padding: .25rem .55rem; border-radius: 50px; font-size: .75rem; margin-left: .4rem; color: #28a745; } /* Columns */ .cmpX-col { font-size: .93rem; line-height: 1.45; color: #393939; } /* Left labels */ .cmpX-label { font-weight: 600; color: #111; } /* Icon base */ .cmpX-ico { display: inline-flex; width: 18px; height: 18px; margin-right: .55rem; align-items: center; justify-content: center; } /* Checkmark SVG */ .cmpX-ico.check::before { content: ""; width: 16px; height: 16px; display: block; background: url("data:image/svg+xml,") center/contain no-repeat; } /* Cross SVG */ .cmpX-ico.cross::before { content: ""; width: 16px; height: 16px; display: block; background: url("data:image/svg+xml,") center/contain no-repeat; } /* Highlight columns */ .cmpX-tb.yes { border-left: 3px solid #28a745; padding-left: .85rem; } .cmpX-local.no { border-left: 3px solid #e74c3c; padding-left: .85rem; opacity: .85; } /* MOBILE FIX — 100% working now */ @media (max-width: 768px) { .cmpX-row { grid-template-columns: 1fr; gap: .5rem; padding: 1.1rem 1.1rem; } } @media (max-width: 768px) { .cmpX-head { display: none; } } @media (max-width: 768px) { .cmpX-col { border-left: none !important; padding-left: 0 !important; } } @media (max-width: 768px) { .cmpX-ico { margin-right: .4rem; } } @media (max-width: 768px) { .cmpX-label { margin-bottom: .2rem; } } .finalCTA700 { position: relative; overflow: hidden; background: linear-gradient(180deg, #f5fff9 0%, #ffffff 100%); } .finalCTA700 .cta700-spotlight { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( circle at 50% 20%, rgba(40, 167, 69, 0.25), transparent 55% ); opacity: .6; } .tb-tldr { max-width: 920px; margin: auto; padding: 2.2rem 0; font-size: 1.28rem; line-height: 1.65; color: #222; text-align: center; font-weight: 400; } .tb-tldr strong { font-weight: 700; color: #0d7a3b; } /* ===================== INDUSTRIES ===================== */ .advInd-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid #e6eaed; box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 10px 26px rgba(0,0,0,0.05); } .advInd-card { padding: 2rem 1.6rem; border-right: 1px solid #e6eaed; border-bottom: 1px solid #e6eaed; background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: .25s ease; } .advInd-card:nth-child(3), .advInd-card:nth-child(6) { border-right: none; } .advInd-card:hover { background: #ffffffd9; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .advInd-head { display: flex; align-items: center; gap: 10px; } .advInd-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .icon-green { background: #e9f6ec; color: #28a745; } .icon-orange { background: #fff1e6; color: #ff7e29; } .icon-blue { background: #e7f2ff; color: #4a95ff; } .icon-purple { background: #f1e9ff; color: #a06bff; } .icon-pink { background: #ffe9ef; color: #ff4f7a; } .advInd-title { font-size: 1.25rem; font-weight: 700; margin: 0; } .advInd-text { margin-top: .7rem; line-height: 1.55; } /* ===================== MINI TABLE ===================== */ .adv-table-wrap { overflow-x: auto; margin-top: 1.2rem; border-radius: 14px; border: 1px solid #e5e9ec; } .adv-mini-table { min-width: 700px; } .adv-row { display: grid; grid-template-columns: 1.2fr .7fr .7fr 1fr; padding: 1rem 1.2rem; border-bottom: 1px solid #edf1f4; } .adv-row:last-child { border-bottom: none; } .adv-head { background: #f5f8f9; font-weight: 700; } .adv-strong { font-weight: 700; color: #28a745; } /* ===================== DISCOUNT BANNER ===================== */ .advDiscount { margin-top: 2rem; padding: 1.6rem; border-radius: 34px; background: #28a745; color: #fff; border: 1px solid rgba(255,255,255,0.65); box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 40px rgba(40,167,69,0.18), inset 0 0 25px rgba(255,255,255,0.4); animation: qbFloat 8s ease-in-out infinite; transform-style: preserve-3d; } .advDiscount-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .advDiscount-icon svg { fill: #fff; } .advDiscount-text { font-size: 1.05rem; line-height: 1.5; } .advDiscount-btn { background: #fff !important; color: #28a745 !important; border-radius: 10px; padding: .7rem 1.3rem; font-weight: 700; white-space: nowrap; } /* Responsive */ @media (max-width:992px) { .advInd-grid { grid-template-columns: 1fr 1fr; } } @media (max-width:768px) { .advInd-grid { grid-template-columns: 1fr; } } @media (max-width:768px) { .advDiscount-wrap { flex-direction: column; align-items: flex-start; } } /* V12 PREMIUM EXCEL HYBRID TABLE */ /* Wrapper */ .qbEcoTable-wrap { overflow-x: auto; padding: 12px; border-radius: 14px; } /* Table */ .qbEcoTable { width: 100%; border-collapse: collapse; background: #ffffff; border: 1px solid #d0d9ea; font-size: 0.96rem; box-shadow: 0 12px 34px rgba(0,0,0,0.04); } /* Headers */ .qbEcoTable th { background: #e8f0ff; color: #1c1c1c; font-weight: 700; padding: 16px 18px; border: 1px solid #c7d3e9; letter-spacing: 0.2px; font-size: 1rem; } /* Cells */ .qbEcoTable td { padding: 14px 18px; border: 1px solid #e0e6f2; background: #fdfdff; transition: background .2s ease; } /* Row hover effect (premium) */ .qbEcoTable tr:hover td { background: #eef4ff; } /* Link */ .qbEcoTable a { color: #0047b3; font-weight: 500; text-decoration: none; transition: color .15s ease, text-shadow .15s ease; } .qbEcoTable a:hover { color: #28a745; text-shadow: 0 0 10px rgba(40,167,69,.25); } /* Responsive */ @media (max-width: 768px) { .qbEcoTable th, .qbEcoTable td { white-space: nowrap; } } .policy-page { color: #333; line-height: 1.6; } .policy-header { padding-top: 8em; padding-right: 1em; padding-bottom: 3em; padding-left: 1em; } .policy-updated { font-size: 1em; color: #777; } .tb-subtext-center.legal { font-size: 1.25em; } @media (max-width:576px) { .policy-body { padding: 20px; } } .policy-content h4 { font-size: 1.5rem; margin-top: 25px; margin-bottom: 15px; color: #383839; } .policy-content p { margin-bottom: 15px; } .check-list { list-style: none; padding-left: 0; } .check-list li { position: relative; padding-left: 30px; margin-bottom: 12px; } .check-list li::before { content: "✔"; color: #34bf49; position: absolute; left: 0; font-weight: 700; } .policy-disclaimer { margin-top: 40px; padding: 15px; background: #f8f9fa; font-size: .9rem; color: #666; border-left: 4px solid var(--accent-color,#0077cc); } @media (max-width:768px) { .policy-content h4 { font-size: 1.15rem; } } .hero-image { transition: transform 0.4s ease-in-out; border-radius: 50%; } .card-title { margin-bottom: 10px; } .card-text { font-size: 1rem; color: #444; margin-bottom: 20px; } .feature-card-1 { background-color: #0d333f; padding: 2rem; border-radius: 12px; box-shadow: 0 6px 18px rgb(0 0 0 / .1); transition: transform 0.3s ease,box-shadow 0.3s ease; min-height: 20.625rem; } .feature-card-1:hover { box-shadow: 0 10px 25px rgb(0 0 0 / .15); } .section-header h2 { margin-bottom: .75rem; line-height: 1.2; font-weight: 600; letter-spacing: -.03em; color: var(--heading-color); } .cta-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .75rem 1.4rem; border-radius: 14px; background: #28a745; color: #fff; border: 2px solid #28a745; font-weight: 600; text-decoration: none; transition: transform .22s ease,box-shadow .22s ease,background-color .18s ease,color .18s ease; box-shadow: 0 6px 20px rgb(40 167 69 / .14); position: relative; } .cta-btn:hover { box-shadow: 0 14px 34px rgb(40 167 69 / .18); color: #28a745; background: #fff; border: 2px solid #28a745; } .cta-btn--invert { background: #fff; color: #28a745; border-color: #28a745; box-shadow: 0 6px 18px rgb(0 0 0 / .06); } .cta-btn--invert:hover { background: #2d465e; color: #fff; box-shadow: 0 12px 34px rgb(40 167 69 / .18); } .feature-box { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; -webkit-box-shadow: 0 0 40px 0 rgb(38 49 209 / .2); box-shadow: 0 0 40px 0 rgb(38 49 209 / .2); } .feature-box i { font-size: 2.2rem; color: #28a745; line-height: 1; } .feature-box h4 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #222; } .feature-box p { margin: 0; color: #444; font-size: .93rem; line-height: 1.45; } @media (max-width:575.98px) { .feature-box { padding: .9rem; } } @media (max-width:575.98px) { .feature-box i { font-size: 1.9rem; } } @media (max-width:575.98px) { .feature-box h4 { font-size: .98rem; } } @media (max-width:575.98px) { .feature-box p { font-size: .88rem; } } .tb-section { --accent: #ffcc00; } .tb-check { min-width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .06); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); margin-top: 3px; font-size: 14px; } /* Remove margin + border-radius below MD */ /* Add this to your stylesheet */ /* --------------------------------------------------------    HERO CTA BUTTONS — MODERN FIXED HEIGHT / EQUAL WIDTH    -------------------------------------------------------- */ .hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; } /* Base button */ /* Primary CTA */ /* Phone CTA */ /* Hover inversion */ /* Click/Active feedback */ /* Focus ring (accessibility) */ /* Phone SVG icon */ /* Mobile layout: full width buttons */ @media (max-width: 575px) { .hero-buttons { flex-direction: column; } } /* Reduce legal link padding below MD */ /* Divider line between links */ /* Remove last divider */ /* Divider element in older layout (kept for safety, no duplication) */ /* =========================================== FLAG ICON =========================================== */ .navV60-logo img { height: 40px; display: block; } .heroQB-form, .homeV20-search-inner, .homeV20-search-main { position: relative; z-index: 5; } #hero-search-suggestions { position: absolute; top: 100%; left: 0; width: 100%; z-index: 9999 !important; } .hero-search-suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 10px); background: #fff; border: 1px solid #e2e2e2; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.12); padding: 6px 0; z-index: 999999; display: none; overflow: hidden; max-height: calc(4 * 52px); } /* NAV search suggestion font slightly smaller */ .qb-check { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; margin-right: 12px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,"); } /* BELOW MD (<768px) → 2 per row */ /* BELOW SM (<576px) → still 2 per row (NOT full width) */ /* TINY screens (<480px) */ .d-flex .card-title { min-width: 0; } html { scrollbar-gutter: stable; } /* NEW-DESIGN-STYLES */ /* Container */ .tb-proadvisor-bubble { position: fixed; left: -4px; top: 18%; transform: translateY(-50%); display: flex; align-items: center; gap: 0.65rem; background: #fff; padding: 0.55rem 1rem 0.55rem 0.55rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); border: 1px solid #e5ece6; z-index: 9999; cursor: pointer; text-decoration: none; transition: all 0.25s ease; white-space: nowrap; } /* Hover effect */ .tb-proadvisor-bubble:hover { transform: translateY(-50%) translateX(4px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); } /* Circular QB icon */ .tb-proadvisor-bubble .icon { width: 28px; height: 28px; background: #28a745; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } /* Text */ .tb-proadvisor-bubble .label { font-size: 0.95rem; color: #111; font-weight: 500; } /* Online dot */ .tb-proadvisor-bubble .dot { width: 8px; height: 8px; background: #28a745; border-radius: 50%; box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.25); animation: pulseDot 2.2s infinite ease-in-out; } /* Pulse effect */ @keyframes pulseDot { 0% { box-shadow: 0 0 0 4px rgba(40,167,69,0.25); } 50% { box-shadow: 0 0 0 7px rgba(40,167,69,0.15); } 100% { box-shadow: 0 0 0 4px rgba(40,167,69,0.25); } } /* Mobile tweaks */ @media (max-width: 768px) { .tb-proadvisor-bubble { left: 8px; padding: 0.45rem 0.9rem 0.45rem 0.45rem; } } @media (max-width: 768px) { .tb-proadvisor-bubble .label { font-size: 0.88rem; } } /* ---------------------------------------------------------    V800.2 — Full Premium How It Works Section    Always-visible borders + SoftGlass + Responsive Logic ---------------------------------------------------------- */ .hiw800-section { padding: 4rem 0 3rem; background: #ffffff; position: relative; } .hiw800-container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; } /* HEADER — matches final-cta */ .hiw800-header .h2-centered h2 { font-weight: 700; font-size: 2rem; color: #1f1f1f; } /* GRID WRAPPER */ .hiw800-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 22px; overflow: hidden; background: #ffffff; border: 1px solid #e6eaed; box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 10px 26px rgba(0,0,0,0.05); } /* ---------------------------------------------------------    CARD — ALWAYS-VISIBLE BORDERS ---------------------------------------------------------- */ .hiw800-card { display: flex; padding: 2rem 1.5rem; gap: 1.2rem; background: rgba(255,255,255,0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all .28s ease; position: relative; border-right: 1px solid #e1e5e8; } /* Remove right border from last card */ .hiw800-card:last-child { border-right: none; } /* Hover — small elegant color change */ .hiw800-card:hover { background: rgba(255,255,255,0.92); border-color: #d1e5d3 !important; transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(40,167,69,0.10), 0 10px 26px rgba(0,0,0,0.05); } /* ---------------------------------------------------------    ICON — +5px bigger ---------------------------------------------------------- */ .hiw800-icon { width: 64px; height: 64px; border-radius: 16px; background: #f4faf6; border: 1px solid #dfe9e1; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } .hiw800-icon img { width: 35px; height: 35px; } /* ---------------------------------------------------------    CONTENT ---------------------------------------------------------- */ .hiw800-content { flex: 1; } .hiw800-step-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .4rem; } .hiw800-text { font-size: .97rem; color: #475058; margin: 0; line-height: 1.55; } /* ---------------------------------------------------------    TABLET (≤ 992px) → 2 per row ---------------------------------------------------------- */ @media (max-width: 992px) { .hiw800-grid { grid-template-columns: repeat(2, 1fr); } } /* Remove right borders in 2-col layout */ @media (max-width: 992px) { .hiw800-card { border-right: none !important; border-bottom: 1px solid #e1e5e8; } } /* Last card: no bottom border */ @media (max-width: 992px) { .hiw800-card:last-child { border-bottom: none !important; } } /* ---------------------------------------------------------    MOBILE (≤ 600px) → 1 per row ---------------------------------------------------------- */ @media (max-width: 600px) { .hiw800-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .hiw800-card { border-right: none !important; border-bottom: 1px solid #e1e5e8 !important; } } @media (max-width: 600px) { .hiw800-card:last-child { border-bottom: none !important; } } /* ----------------------------------------------    V300 — Executive Comparison Matrix Upgrade ---------------------------------------------- */ /* Ambient glow stays unchanged */ /* SoftGlass table (unchanged base) */ .cmp100-table { display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: rgba(255,255,255,0.75); backdrop-filter: blur(22px) saturate(185%); -webkit-backdrop-filter: blur(22px) saturate(185%); border: 1px solid rgba(255,255,255,0.55); box-shadow: 0 18px 45px rgba(0,0,0,0.07); } /* ⭐ NEW GRID BALANCE — LABEL COLUMN LESS WIDE */ .cmp100-row { display: grid; grid-template-columns: 0.9fr 1.1fr 1.1fr; padding: 1.75rem 1.9rem; align-items: flex-start; gap: 1.4rem; border-bottom: 1px solid rgba(0,0,0,0.05); } /* ⭐ Slight row hover polish */ .cmp100-row:hover { background: rgba(255,255,255,0.5); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); transition: background .25s ease; } /* Header row */ .cmp100-head { background: linear-gradient(120deg, rgba(40,167,69,0.25), rgba(40,167,69,0.12)); font-weight: 700; padding-top: 2rem; padding-bottom: 2rem; } .cmp100-head .cmp100-col { font-size: 1.1rem; color: #1d1d1d; } /* Improved column typography */ .cmp100-col { font-size: 1rem; line-height: 1.62; color: #222; } .cmp100-label { font-weight: 700; color: #1c1c1c; font-size: 1.05rem; padding-right: 0.5rem; } /* TechBrot & local */ .cmp100-tb { color: #1b3b25; font-weight: 600; } .cmp100-local { color: #6f6f6f; } /* Small tag */ .cmp100-tag { display: inline-block; margin-top: .3rem; padding: .25rem .55rem; font-size: .72rem; border-radius: 5px; background: rgba(40,167,69,0.18); color: #1d3b25; } /* Yes/No */ .yes { color: #28a745; font-weight: 600; } .no { color: #d5534f; font-weight: 600; } /* ⭐ Mobile optimization — better spacing & borders */ @media (max-width:768px) { .cmp100-row { display: block; padding: 1.4rem 1.3rem; border-bottom: 1px solid rgba(0,0,0,0.08); } } @media (max-width:768px) { .cmp100-label { font-size: 1.1rem; color: #111; margin-bottom: .55rem; font-weight: 700; } } @media (max-width:768px) { .cmp100-col { margin-bottom: .65rem; } } @media (max-width:768px) { .cmp100-head { display: none; } } /* TABLE-END */ /* -------------------------------------------    V700 Trust Metrics — CountUp + Glow Edition -------------------------------------------- */ .trust700 { padding: 4.8rem 0; background: #ffffff; position: relative; overflow: hidden; } .trust700-container { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; text-align: center; } /* HEADING */ .trust700-h2block { margin-bottom: 2.8rem; } .trust700-h2 { font-size: 2rem; font-weight: 700; margin: 0; } .trust700-h2line { width: 52px; height: 3px; background: #28a745; margin: 0.65rem auto 0; display: block; border-radius: 2px; } /* BACKGROUND GLOW */ .trust700-glow { position: absolute; top: 0; left: 50%; width: 900px; height: 900px; background: radial-gradient(circle, rgba(40,167,69,0.22), transparent 72%); transform: translateX(-50%); filter: blur(140px); opacity: .55; pointer-events: none; } /* GRID */ .trust700-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: 1rem; } /* CARD */ .trust700-card { background: rgba(255,255,255,0.78); border-radius: 18px; border: 1px solid #e8ecef; padding: 2rem 1.2rem; backdrop-filter: blur(14px) saturate(185%); -webkit-backdrop-filter: blur(14px) saturate(185%); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 22px rgba(0,0,0,0.05); transition: all .28s ease; } .trust700-card:hover { transform: translateY(-6px); border-color: rgba(40,167,69,0.35); box-shadow: 0 0 0 1px rgba(40,167,69,0.10), 0 16px 36px rgba(0,0,0,0.07); } /* NUMBERS */ .trust700-number { font-size: 2rem; font-weight: 700; margin-bottom: .35rem; color: #1e1e1e; } /* Static text card */ .trust700-text { font-size: 2rem; } /* LABEL */ .trust700-label { margin: 0; font-size: 1rem; color: #505a62; } /* RESPONSIVE */ @media (max-width: 992px) { .trust700-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } } @media (max-width: 600px) { .trust700-grid { grid-template-columns: 1fr; gap: 1.3rem; } } @media (max-width: 600px) { .trust700-h2 { font-size: 1.75rem; } } /* ---------------------------    RELATED ARTICLES V12 PREMIUM    --------------------------- */ #related-articles .ra12-header { text-align: center; margin-bottom: 2.4rem; } /* List Layout */ .ra12-list { display: flex; flex-direction: column; gap: 1.35rem; } /* Article Card */ .ra12-item { position: relative; background: #ffffff; padding: 1.4rem 1.4rem 1.4rem 1.75rem; border-radius: 18px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); transition: .3s ease; overflow: hidden; } /* Left Ribbon Accent */ .ra12-accent { position: absolute; left: 0; top: 0; width: 6px; height: 100%; background: linear-gradient(to bottom,#28a745,#5adf8d); border-radius: 6px 0 0 6px; opacity: .9; } /* Hover Glow */ .ra12-item:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,0.12), 0 0 24px rgba(40,167,69,0.18); } /* Headings */ .ra12-item h5 { margin: 0 0 .4rem; font-weight: 700; font-size: 1.15rem; } .ra12-item h5 a { color: #222; text-decoration: none; transition: .25s; } .ra12-item h5 a:hover { color: #28a745; } /* Text */ .ra12-item p { margin: 0; color: #5b6166; font-size: .97rem; line-height: 1.5; } /* Mobile */ @media (max-width:768px) { .ra12-item { padding: 1.2rem 1.2rem 1.2rem 1.6rem; } } /* ---------------------------------------------------------    V600 — Enterprise Horizontal Trust Framework    --------------------------------------------------------- */ .alG600 { padding: 4.8rem 0; background: #ffffff; border-top: 1px solid #eceff2; border-bottom: 1px solid #eceff2; } /* HEADER */ .alG600-head { max-width: 880px; margin: 0 auto 3.4rem; text-align: center; } .alG600-sub { color: #485057; max-width: 780px; margin: .9rem auto 0; } /* MAIN WRAP */ .alG600-wrap { display: flex; justify-content: center; align-items: flex-start; gap: 3rem; flex-wrap: wrap; } /* LEFT PANEL */ .alG600-left { width: 280px; text-align: center; } .alG600-shield { background: #f5fdf7; padding: 1.8rem; border-radius: 22px; border: 1px solid rgba(40,167,69,0.25); box-shadow: 0 8px 28px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.8) inset; } .alG600-left-text { margin-top: 1.3rem; color: #455058; font-size: .97rem; line-height: 1.55; } /* RIGHT PANEL (3 guarantee columns) */ .alG600-right { flex: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; } /* Guarantee Items */ .alG600-item { background: #ffffff; padding: 2rem 1.7rem; border-radius: 18px; border: 1px solid #e5e8ea; box-shadow: 0 4px 20px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.8) inset; transition: all .28s ease; } .alG600-item:hover { transform: translateY(-4px); border-color: rgba(40,167,69,0.35); box-shadow: 0 10px 32px rgba(0,0,0,0.07), 0 0 0 1px rgba(40,167,69,0.15) inset; } /* Icons */ .alG600-icon { width: 54px; height: 54px; border-radius: 14px; background: #f4fbf6; border: 1px solid rgba(40,167,69,0.18); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } /* Titles & Text */ .alG600-item h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .55rem; color: #1f1f1f; } .alG600-item p { font-size: .94rem; color: #454b52; line-height: 1.58; } /* Mobile */ @media (max-width:992px) { .alG600-right { grid-template-columns: 1fr; gap: 1.6rem; } } @media (max-width:992px) { .alG600-wrap { flex-direction: column; align-items: center; gap: 2.6rem; } } @media (max-width:992px) { .alG600-left { width: 100%; max-width: 340px; } } /* -----------------------------    V150 LUXE TRUST BADGES (FIXED) ------------------------------ */ .alTB150 { background: #f8f9fa; padding: 4rem 0; } /* Subtext */ /* GRID — NOW FIXED + VISIBLE */ .alTB150-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid #e6eaec; border-radius: 20px; background: #ffffff; } /* CARD */ .alTB150-card { padding: 2rem 1.6rem; text-align: center; transition: all .25s ease; } /* RIGHT BORDER ON DESKTOP */ .alTB150-card:not(.alTB150-last) { border-right: 1px solid #e2e6e8; } .alTB150-card:hover { background: #f5fdf7; box-shadow: inset 0 0 0 1px rgba(40,167,69,0.15); } /* IMAGE WRAP */ .alTB150-img-wrap { width: 86px; height: 86px; background: #f3fbf6; border-radius: 14px; margin: 0 auto 0.8rem; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(40,167,69,0.25); } .alTB150-img-wrap img { width: 100%; object-fit: contain; } /* LABEL */ .alTB150-label { font-size: .96rem; font-weight: 600; color: #333; } /* -----------------------------    BELOW 992PX → 2 BADGES PER ROW ------------------------------ */ @media (max-width:992px) { .alTB150-grid { grid-template-columns: repeat(2,1fr); } } /* Remove desktop borders */ @media (max-width:992px) { .alTB150-card { border-right: none !important; } } /* Add a full thin border grid (“+ like border”) */ @media (max-width:992px) { .alTB150-card { border: 1px solid #e6eaec !important; } } /* Mobile fine tuning */ @media (max-width:576px) { .alTB150-card { padding: 1.6rem 1.2rem; } } @media (max-width:576px) { .alTB150-img-wrap { width: 76px; height: 76px; } } /* ============================================================    V700 CTA — Ultra Premium Parallax + Softglass Motion System    ============================================================ */ #final-cta { position: relative; overflow: hidden; padding: 5rem 0; background: #f4faf6; background: radial-gradient(circle at top left, rgba(40, 167, 69, 0.08), transparent 55%), radial-gradient(circle at bottom right, rgba(40, 167, 69, 0.08), transparent 55%), rgba(255, 255, 255, 0.78); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14), 0 0 80px rgba(40, 167, 69, 0.18), inset 0 0 40px rgba(40, 167, 69, 0.08); } /* Content stays above everything */ .finalCTA700-content { position: relative; z-index: 20; text-align: center; } /* Base grid overlay */ .cta700-grid { background: linear-gradient(90deg, rgba(40,167,69,0.05) 1px, transparent 1px), linear-gradient(0deg, rgba(40,167,69,0.05) 1px, transparent 1px); background-size: 36px 36px; opacity: .45; } /* All background layers absolute */ .cta700-bg-layer { position: absolute; inset: 0; z-index: 1; } /* Parallax Layer 1 — soft green clouds */ .cta700-parallax-1 { background: radial-gradient(circle at 30% 40%, rgba(40,167,69,0.22), transparent 70%); filter: blur(110px); opacity: .55; animation: p1move 18s ease-in-out infinite; } @keyframes p1move { 0% { transform: translate(-5%, -4%); } 50% { transform: translate(5%, 6%); } 100% { transform: translate(-5%, -4%); } } /* Parallax Layer 2 — deeper soft glow */ .cta700-parallax-2 { background: radial-gradient(circle at 70% 60%, rgba(40,167,69,0.18), transparent 70%); filter: blur(150px); opacity: .55; animation: p2move 22s ease-in-out infinite; } @keyframes p2move { 0% { transform: translate(3%, 3%); } 50% { transform: translate(-4%, -5%); } 100% { transform: translate(3%, 3%); } } /* Floating wave aura */ .cta700-waves { background: radial-gradient(circle at 50% 10%, rgba(40,167,69,0.18), transparent 80%), radial-gradient(circle at 20% 80%, rgba(40,167,69,0.12), transparent 80%); animation: wavemotion 16s linear infinite; opacity: .4; } @keyframes wavemotion { 0% { transform: translateY(0); } 100% { transform: translateY(-50px); } } /* Spotlight cursor */ .cta700-spotlight { width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle, rgba(40,167,69,0.24), transparent 70%); filter: blur(90px); opacity: .55; pointer-events: none; transform: translate(-50%, -50%); z-index: 5; } /* ------------------------------------------------------------    BUTTONS (Softglass + Glow + Motion) ------------------------------------------------------------- */ .finalCTA700-btnwrap { margin-top: 2.4rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .finalCTA700-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .95rem 2rem; font-size: 1.15rem; font-weight: 600; border-radius: 45px; text-decoration: none; transition: all .25s ease; position: relative; } /* Solid (primary) */ .finalCTA700-solid { background: #28a745; color: #fff; box-shadow: 0 6px 18px rgba(40,167,69,.35); } /* Force solid button to pure-white text + icon on hover */ .finalCTA700-solid:hover { background: #218838; color: #ffffff !important; fill: #ffffff !important; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(40,167,69,.48); } /* Ensure SVG icons inside the solid button turn white */ .finalCTA700-solid:hover svg path { fill: #ffffff !important; } /* Outline Softglass */ .finalCTA700-outline { color: #28a745; background: rgba(255,255,255,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 2px solid #28a745; box-shadow: 0 4px 16px rgba(0,0,0,.08); } .finalCTA700-outline:hover { background: #28a745; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(40,167,69,.48); } /* Subtext spacing fix */ .finalCTA700-sub { max-width: 780px; margin: 1.3rem auto 0; line-height: 1.62; color: #3b3b3b; font-size: 1.25em; } /* Mobile */ @media (max-width:768px) { .finalCTA700-btn { width: 100%; justify-content: center; } } /* GRID */ .al-v15-grid > div { text-decoration: none; } /* Card base */ .al-v15-card { border-radius: 20px; padding: 1.75rem 1.4rem; position: relative; backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(40, 167, 69, 0.28); transition: all .35s ease; display: flex; flex-direction: column; gap: .35rem; } /* Micro-grid overlay */ .al-v15-card::before { content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; } /* Neon Glow Hover */ .al-v15-card:hover { transform: translateY(-6px) scale(1.02); border-color: rgba(40,167,69,0.6); } /* Heading */ .al-v15-card h5 { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: .15px; } /* Text */ .al-v15-card p { font-size: .95rem; color: #333; line-height: 1.5; } /* Mobile */ @media (max-width:768px) { .al-v15-card { padding: 1.45rem 1.2rem; } } svg { margin-right: 3PX; } /* ======================================    V5 PREMIUM BRAND SCROLLBAR (TECHBROT) ====================================== */ .cb-aside { position: sticky; top: 96px; max-height: calc(100vh - 110px); overflow-y: auto; overscroll-behavior: contain; padding-right: 0; } @media (max-width: 991px) { .cb-aside { display: none; } } /* Firefox */ .cb-aside { scrollbar-width: thin; scrollbar-color: rgba(40,167,69,.55) transparent; } /* WebKit scrollbar */ .cb-aside::-webkit-scrollbar { width: 4px; } /* TRACK — invisible but with rail lines */ .cb-aside::-webkit-scrollbar-track { background: transparent; position: relative; } /* Rail lines (top & bottom stops) */ .cb-aside::-webkit-scrollbar-track::before, .cb-aside::-webkit-scrollbar-track::after { content: ""; display: block; height: 6px; background: rgba(40,167,69,.25); } /* Thumb — brand-led, sharp, premium */ .cb-aside::-webkit-scrollbar-thumb { background-color: rgba(40,167,69,.45); border-radius: 0; transition: background-color .18s ease, box-shadow .18s ease; } /* Hover — slightly stronger brand */ .cb-aside:hover::-webkit-scrollbar-thumb { background-color: rgba(40,167,69,.65); } /* Active / drag — full brand confidence */ .cb-aside::-webkit-scrollbar-thumb:active { background-color: #28a745; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); } @media (max-width: 991px) { .cb-aside { position: static; max-height: none; overflow: visible; } } /* ======================================    V5 4-IMAGE MOSAIC (70/30 → 30/70) ====================================== */ .tb-who-img-grid { display: grid; grid-template-columns: 7fr 3fr; grid-template-rows: auto auto; gap: 12px; margin-top: 1em; } .tb-who-img-box { position: relative; overflow: hidden; border-radius: 6px; } .tb-who-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─────────────    ROW 1    70 | 30 ───────────── */ .tb-who-img-box:nth-child(1) { grid-column: 1; grid-row: 1; } .tb-who-img-box:nth-child(2) { grid-column: 2; grid-row: 1; } /* ─────────────    ROW 2    30 | 70 ───────────── */ .tb-who-img-box:nth-child(3) { grid-column: 1; grid-row: 2; } .tb-who-img-box:nth-child(4) { grid-column: 2; grid-row: 2; } @media (max-width: 767px) { .tb-who-img-grid { grid-template-columns: 1fr; grid-template-rows: auto; } } /* Initially hidden pills */ .hidden-pill { display: none; opacity: 0; transform: translateY(6px); } /* Premium animation class */ .pill-reveal { display: inline-block !important; animation: pillFadeUp 0.35s ease forwards; } /* Stagger animation delay */ .pill-reveal:nth-child(1) { animation-delay: 0.02s; } .pill-reveal:nth-child(2) { animation-delay: 0.04s; } .pill-reveal:nth-child(3) { animation-delay: 0.06s; } /* Auto continues for all... the browser handles the rest smoothly */ @keyframes pillFadeUp { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } /* Button styling */ .pill-toggle-wrap { text-align: center; margin-top: 1.2rem; } .pill-toggle-btn { padding: 0.55rem 1.6rem; border-radius: 40px; font-weight: 600; border: 1px solid #28a745; background: #ffffff; color: #28a745; cursor: pointer; transition: all .25s ease; } .pill-toggle-btn:hover { background: #28a745; color: #ffffff; } .case-author { font-weight: 500; } /* ======================================    FAQ / INTERNAL LINKS — V5 PREMIUM ====================================== */ .faq-internal-links { background: #fff; border-radius: 10px; padding: 1.25rem 1.25rem 1.1rem; box-shadow: 0 6px 18px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.04); } /* Heading */ .faq-internal-links .h6 { margin-bottom: .75rem; font-weight: 600; font-size: .95rem; letter-spacing: -.01em; color: #111; } /* List reset */ .faq-mini-nav { list-style: none; padding: 0; margin: 0; } /* Each item */ .faq-mini-nav li { margin: 0; } /* Link styling */ .faq-mini-nav a { display: block; padding: .55rem .75rem; border-radius: 6px; font-size: .9rem; font-weight: 500; color: #1f1f1f; text-decoration: none; transition: background-color .18s ease, color .18s ease, transform .12s ease; } /* Hover — premium, restrained */ .faq-mini-nav a:hover { background-color: rgba(40,167,69,.08); color: #28a745; transform: translateX(2px); } /* Active / focus */ .faq-mini-nav a:focus-visible { outline: none; background-color: rgba(40,167,69,.12); color: #28a745; } /* ================================    Core Services – Global Styles ================================ */ .tb-core-services { background: #ffffff; padding: clamp(3rem, 6vw, 5rem) 0; } .tb-core-subtext { max-width: 820px; margin: 0 auto 3.5rem; color: #555; font-size: 1.05rem; line-height: 1.6; } /* Grid */ .tb-core-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem; } /* Card */ .tb-core-card { position: relative; } .tb-core-card-inner { height: 100%; padding: 2rem 1.9rem; background: #ffffff; border-radius: 18px; border: 1px solid #eef0f2; transition: all 0.25s ease; } .tb-core-card-inner:hover { transform: translateY(-4px); border-color: rgba(40, 167, 69, 0.35); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08); } /* Title */ .tb-core-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.75rem; color: #111; } /* Description */ .tb-core-desc { font-size: 0.95rem; line-height: 1.55; color: #555; margin-bottom: 1.5rem; } /* CTA link */ .tb-core-link { display: inline-flex; align-items: center; font-size: 0.9rem; font-weight: 500; color: #28a745; text-decoration: none; transition: all 0.2s ease; } .tb-core-link:hover { color: #1e7e34; gap: 4px; } /* Optional subtle focus for accessibility */ .tb-core-link:focus-visible { outline: 2px dashed #28a745; outline-offset: 4px; } .tb-core-card-inner { height: 100%; padding: 2rem 1.9rem; background: #ffffff; border-radius: 18px; border: 1px solid #eef0f2; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .tb-core-card-inner:hover { transform: translateY(-4px); border-color: rgba(40, 167, 69, 0.35); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), 0 18px 48px rgba(0, 0, 0, 0.12); } /* ================================    Error Cards – Final Stable System ================================ */ /* Grid */ .tb-error-grid { margin-top: 1.6rem; gap: 1.4rem; } /* Card */ .tb-error-card { position: relative; padding: 1.35rem 1.4rem; border-radius: 18px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 14px 36px rgba(0, 0, 0, 0.14); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .tb-error-card:hover { transform: translateY(-5px); border-color: rgba(214, 40, 40, 0.35); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10), 0 24px 56px rgba(0, 0, 0, 0.20); } /* ================================    Title Row (THIS WAS THE ISSUE) ================================ */ .tb-error-title { display: flex; align-items: center; gap: 0.7rem; margin: 0; padding: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: #0f172a; } /* ================================    Icon – Locked, No Color Inheritance ================================ */ .tb-error-icon { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #fee2e2; border: 1px solid #fca5a5; } /* 🔒 HARD LOCK icon color */ .tb-error-icon svg { width: 16px; height: 16px; display: block; margin-left: 3px; fill: #b91c1c; color: #b91c1c; } /* ================================    Body Text ================================ */ .tb-error-card .tb-muted { margin-top: 0.45rem; color: #374151; font-size: 0.95rem; line-height: 1.6; } /* ================================    Who We Serve – Premium Mosaic ================================ */ .tb-who-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; } /* LEFT PANEL */ .tb-who-panel { background: rgba(255, 255, 255, 0.9); border-radius: 22px; padding: 1.9rem 1.7rem; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 30px 60px rgba(0, 0, 0, 0.12); } .tb-who-list { list-style: none; padding: 0; margin: 0; } .tb-who-item { display: flex; gap: 0.9rem; margin-bottom: 1.35rem; } .tb-who-item:last-child { margin-bottom: 0; } .tb-who-item h6 { margin: 0 0 0.25rem; font-weight: 700; color: #0f172a; } /* Icon */ .tb-who-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; background: rgba(40, 167, 69, 0.12); display: inline-flex; align-items: center; justify-content: center; } .tb-who-icon svg { width: 16px; height: 16px; } .tb-who-icon circle { fill: none; } .tb-who-icon path { fill: #28a745; } /* RIGHT MOSAIC */ .tb-who-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; position: relative; } .tb-who-img { border-radius: 22px; overflow: hidden; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14); } .tb-who-img.large { grid-column: span 2; } .tb-who-img.offset { transform: translateY(12px); } .tb-who-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Responsive */ @media (max-width: 991px) { .tb-who-wrap { grid-template-columns: 1fr; } } @media (max-width: 991px) { .tb-who-mosaic { margin-top: 2rem; } } @media (max-width: 991px) { .tb-who-img.offset { transform: none; } } /* ================================    Local Problems – Premium Grid List ================================ */ /* Grid wrapper */ .tb-local-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; } /* Card item */ .tb-local-item { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.05rem; border-radius: 14px; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.08); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* Hover lift – subtle, professional */ .tb-local-item:hover { transform: translateY(-3px); border-color: rgba(40, 167, 69, 0.35); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10), 0 20px 40px rgba(0, 0, 0, 0.14); } /* Icon alignment */ .tb-local-item .tb-check { flex-shrink: 0; margin-top: 0.15rem; } /* Title */ .tb-local-item strong { display: block; margin-bottom: 0.25rem; font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: #0f172a; } /* Description */ .tb-local-item .tb-muted { margin: 0; font-size: 0.9rem; line-height: 1.55; color: #374151; } /* ================================    Responsive Behavior ================================ */ /* Tablet */ @media (max-width: 992px) { .tb-local-list { grid-template-columns: 1fr; gap: 0.9rem; } } /* Mobile polish */ @media (max-width: 576px) { .tb-local-item { padding: 0.9rem 0.95rem; border-radius: 12px; } } /* =====================================    BENEFITS V50 — SAFE PREMIUM GRID    (Overflow-proof, responsive) ===================================== */ /* WRAP */ .benefits-v50-wrap { position: relative; overflow: hidden; } /* =========================    ORBS — CONTROLLED & SAFE ========================= */ .orb { position: absolute; width: 180px; height: 180px; border-radius: 50%; filter: blur(70px); opacity: 0.35; pointer-events: none; max-width: 100%; } /* Orb positions tuned to stay INSIDE container */ .orb-1 { background: #28a745; top: -60px; left: -60px; animation: orbFloat1 12s infinite ease-in-out; } .orb-2 { background: #28a745; bottom: -80px; right: -80px; animation: orbFloat2 14s infinite ease-in-out; } .orb-3 { background: #28a745; top: 35%; left: 55%; animation: orbFloat3 16s infinite ease-in-out; } /* Subtle motion only (no large translate values) */ @keyframes orbFloat1 { 0% { transform: translate(0,0); } 50% { transform: translate(18px,24px); } 100% { transform: translate(0,0); } } @keyframes orbFloat2 { 0% { transform: translate(0,0); } 50% { transform: translate(-20px,18px); } 100% { transform: translate(0,0); } } @keyframes orbFloat3 { 0% { transform: translate(0,0); } 50% { transform: translate(16px,-20px); } 100% { transform: translate(0,0); } } /* =========================    GRID ========================= */ .benefits-v50-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; width: 100%; padding: 2.5rem 1rem; } /* =========================    CARD ========================= */ .bv50-card { position: relative; overflow: hidden; background: #ffffff; border-radius: 20px; padding: 1.6rem 1.4rem; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 8px 22px rgba(0,0,0,0.10), 0 18px 40px rgba(0,0,0,0.14); transition: transform 0.3s ease, box-shadow 0.3s ease; } /* Shine effect — subtle, not sliding out */ .bv50-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05), transparent ); opacity: 0; transition: opacity 0.4s ease; } .bv50-card:hover::after { opacity: 1; } /* Hover — NO SCALE (scale causes overflow on small screens) */ .bv50-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,0.16), 0 26px 52px rgba(40,167,69,0.25); } /* =========================    ICON ========================= */ .bv50-icon { width: 54px; height: 54px; border-radius: 16px; background: #eaf7f0; display: flex; align-items: center; justify-content: center; margin-bottom: 0.6rem; } /* =========================    TEXT ========================= */ .bv50-card strong { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; color: #0f172a; } .bv50-card .tb-muted { margin: 0; font-size: 0.92rem; line-height: 1.55; } /* =========================    RESPONSIVE SAFETY ========================= */ /* Tablet */ @media (max-width: 991px) { .benefits-v50-wrap { padding: 2rem 1rem; } } /* Mobile — REMOVE ORBS (CRITICAL) */ @media (max-width: 768px) { .orb { display: none; } } @media (max-width: 768px) { .bv50-card { padding: 1.4rem 1.25rem; } } /* Small mobile */ @media (max-width: 480px) { .benefits-v50-wrap { padding-left: 0.75rem; padding-right: 0.75rem; } } .tb-hidden { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } /* ===============================    HERO — PREMIUM V5    =============================== */ .tbH_hero { position: relative; padding: 120px 0 110px; color: #ffffff; overflow: hidden; } /* Overlay polish */ .tbH_overlay { position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 40%), radial-gradient(circle at 80% 0%, rgba(255,255,255,0.06), transparent 45%); pointer-events: none; } /* Inner */ .tbH_inner { position: relative; max-width: 820px; } /* Title */ .tbH_title { font-size: clamp(2.6rem, 4.5vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.15; } /* Breadcrumbs */ .tbH_breadcrumbs ol { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; font-size: 0.9rem; } .tbH_breadcrumbs li { color: rgba(255,255,255,0.75); } .tbH_breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 10px; color: rgba(255,255,255,0.5); } .tbH_breadcrumbs a { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 500; } .tbH_breadcrumbs a:hover { color: #ffffff; text-decoration: underline; } /* Responsive */ @media (max-width: 768px) { .tbH_hero { padding: 90px 0 80px; } } @media (max-width: 768px) { .tbH_title { font-size: 2.2rem; } }