.elementor-2686 .elementor-element.elementor-element-f97b268{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2686 .elementor-element.elementor-element-88aa46e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2686 .elementor-element.elementor-element-144c967{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2686 .elementor-element.elementor-element-6ed2b02{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2686 .elementor-element.elementor-element-438217f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2686 .elementor-element.elementor-element-11bb698{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2686 .elementor-element.elementor-element-d19a6ae{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2686 .elementor-element.elementor-element-b188b83{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2686 .elementor-element.elementor-element-5da3d5c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2686 .elementor-element.elementor-element-fddbd49{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); .elementor-section, .elementor-container, .elementor-widget-wrap, .elementor-widget { overflow: visible !important; } .eco-wrap { --eco-y: #FDCB00 !important; --eco-yd: #c9a100 !important; --eco-cream: #FFFDF3 !important; --eco-black: #0a0a0a !important; --eco-gray: #7A7A7A !important; --eco-light: #F2F2F2 !important; --eco-white: #ffffff !important; --eco-meta: #0080FB !important; --eco-google: #EA4335 !important; --eco-tiktok: #010101 !important; --eco-amazon: #FF9900 !important; --eco-font: 'Poppins', sans-serif !important; --eco-ease: cubic-bezier(0.16, 1, 0.3, 1) !important; font-family: var(--eco-font) !important; color: var(--eco-black); width: 100% !important; overflow: visible !important; } .eco-wrap * { box-sizing: border-box; } .eco-wrap h1, .eco-wrap h2, .eco-wrap h3, .eco-wrap h4, .eco-wrap p, .eco-wrap span, .eco-wrap a, .eco-wrap button { font-family: var(--eco-font) !important; margin: 0; padding: 0; text-decoration: none; outline: none; } .eco-container { max-width: 1200px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; width: 100% !important; padding: 0 15px !important; } .eco-sr { opacity: 0 !important; transform: translateY(40px) !important; transition: all 0.8s var(--eco-ease) !important; } .eco-sr.eco-left { transform: translateX(-40px) translateY(0) !important; } .eco-sr.eco-right { transform: translateX(40px) translateY(0) !important; } .eco-sr.eco-visible { opacity: 1 !important; transform: translate(0, 0) scale(1) !important; } .eco-d1 { transition-delay: 0.1s !important; } .eco-d2 { transition-delay: 0.2s !important; } .eco-d3 { transition-delay: 0.3s !important; } .eco-d4 { transition-delay: 0.4s !important; } .eco-d5 { transition-delay: 0.5s !important; } .eco-tag { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--eco-black) !important; margin-bottom: 20px !important; } .eco-tag::before { content: '' !important; width: 24px !important; height: 3px !important; background: var(--eco-y) !important; border-radius: 3px !important; } .eco-tag.only-left::after { display: none !important; } .eco-tag.light { color: var(--eco-y) !important; } .eco-tag.light::before { background: var(--eco-y) !important; } .eco-h2 { font-size: clamp(32px, 5vw, 44px) !important; font-weight: 900 !important; line-height: 1.1 !important; letter-spacing: -1px !important; color: var(--eco-black) !important; margin-bottom: 24px !important; } .eco-h2.eco-white { color: var(--eco-white) !important; } .eco-btn-y { display: inline-flex !important; align-items: center !important; gap: 12px !important; background: var(--eco-y) !important; color: var(--eco-black) !important; font-size: 15px !important; font-weight: 800 !important; padding: 18px 40px !important; border-radius: 100px !important; transition: all 0.4s var(--eco-ease) !important; border: none !important; cursor: pointer !important; box-shadow: 0 10px 20px rgba(253, 203, 0, 0.2) !important; } .eco-btn-y:hover { transform: translateY(-4px) !important; box-shadow: 0 15px 30px rgba(253, 203, 0, 0.4) !important; } .eco-btn-y svg { width: 18px !important; height: 18px !important; stroke: var(--eco-black) !important; stroke-width: 2.5 !important; fill: none !important; transition: transform 0.3s ease !important; } .eco-btn-y:hover svg { transform: translateX(4px) !important; } .eco-btn-outline { display: inline-flex !important; align-items: center !important; gap: 12px !important; background: transparent !important; color: var(--eco-white) !important; font-size: 15px !important; font-weight: 700 !important; padding: 18px 40px !important; border-radius: 100px !important; border: 1.5px solid rgba(255, 255, 255, 0.4) !important; transition: all 0.4s var(--eco-ease) !important; cursor: pointer !important; } .eco-btn-outline:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.8) !important; transform: translateY(-4px) !important; } .eco-btn-dark { display: inline-flex !important; align-items: center !important; gap: 12px !important; background: var(--eco-black) !important; color: var(--eco-y) !important; font-size: 15px !important; font-weight: 800 !important; padding: 18px 40px !important; border-radius: 100px !important; transition: all 0.4s var(--eco-ease) !important; border: none !important; cursor: pointer !important; } .eco-btn-dark:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important; } .eco-btn-dark svg { width: 18px !important; height: 18px !important; stroke: var(--eco-y) !important; stroke-width: 2.5 !important; fill: none !important; transition: transform 0.3s ease !important; } .eco-btn-dark:hover svg { transform: translateX(4px) !important; } .eco-pm-hero { background: var(--eco-black) !important; min-height: 100vh !important; display: flex !important; align-items: center !important; padding: 140px 0 100px !important; position: relative !important; overflow: hidden !important; } .eco-pm-hero::before { content: '' !important; position: absolute !important; inset: 0 !important; opacity: 0.35 !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E") !important; pointer-events: none !important; z-index: 0 !important; } .eco-pm-hero::after { content: '' !important; position: absolute !important; inset: 0 !important; background-image: linear-gradient(rgba(253, 203, 0, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(253, 203, 0, 0.04) 1px, transparent 1px) !important; background-size: 72px 72px !important; pointer-events: none !important; z-index: 0 !important; } .eco-pm-hero-orb { position: absolute !important; border-radius: 50% !important; pointer-events: none !important; z-index: 0 !important; } .eco-pm-hero-orb-1 { width: 700px !important; height: 700px !important; top: -200px !important; left: -200px !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.2) 0%, transparent 60%) !important; animation: pmOrb1 9s ease-in-out infinite !important; } .eco-pm-hero-orb-2 { width: 500px !important; height: 500px !important; bottom: -120px !important; right: -80px !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.1) 0%, transparent 62%) !important; animation: pmOrb2 12s ease-in-out infinite !important; } @keyframes pmOrb1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -50px); } } @keyframes pmOrb2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 40px); } } .eco-pm-hero-inner { display: grid !important; grid-template-columns: 1.1fr 1fr !important; gap: 72px !important; align-items: center !important; } .eco-pm-hero-badge { display: inline-flex !important; align-items: center !important; gap: 10px !important; border: 1px solid rgba(253, 203, 0, 0.3) !important; background: rgba(253, 203, 0, 0.07) !important; color: var(--eco-y) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; padding: 10px 20px !important; border-radius: 100px !important; margin-bottom: 32px !important; } .eco-pm-hero-badge-dot { width: 7px !important; height: 7px !important; background: var(--eco-y) !important; border-radius: 50% !important; animation: ecoPulse 2s infinite !important; } .eco-pm-hero-title { font-size: clamp(38px, 5.5vw, 68px) !important; font-weight: 900 !important; line-height: 1.2 !important; letter-spacing: -2px !important; color: var(--eco-white) !important; margin-bottom: 24px !important; } .eco-pm-hero-title .acc { display: inline-block !important; color: var(--eco-y) !important; background: linear-gradient(100deg, var(--eco-y) 0%, var(--eco-y) 35%, #fff4a8 50%, var(--eco-y) 65%, var(--eco-y) 100%) !important; background-size: 250% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; animation: ecoShimmer 3.5s linear infinite !important; padding: 0.05em 0 !important; margin-top: -0.05em !important; } .eco-pm-hero-sub { font-size: 16px !important; line-height: 1.85 !important; color: rgba(255, 255, 255, 0.6) !important; margin-bottom: 16px !important; max-width: 540px !important; } .eco-pm-hero-sub2 { font-size: 15px !important; line-height: 1.8 !important; color: rgba(255, 255, 255, 0.4) !important; margin-bottom: 44px !important; max-width: 540px !important; } .eco-pm-hero-sub2 strong { color: rgba(255, 255, 255, 0.8) !important; font-weight: 600 !important; } .eco-pm-hero-ctas { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; } .eco-pm-dash { position: relative !important; z-index: 2 !important; width: 100% !important; } .eco-dash-card { background: rgba(16, 16, 16, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; padding: 28px !important; backdrop-filter: blur(16px) !important; margin-bottom: 16px !important; position: relative !important; overflow: hidden !important; } .eco-dash-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important; background: var(--eco-y) !important; opacity: 0.5 !important; } .eco-dash-card-hdr { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 24px !important; } .eco-dash-label { font-size: 11px !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.4) !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; } .eco-dash-badge { font-size: 11px !important; font-weight: 800 !important; color: #22c55e !important; background: rgba(34, 197, 94, 0.12) !important; padding: 4px 10px !important; border-radius: 100px !important; } .eco-dash-metrics { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } .eco-dm-num { font-size: 28px !important; font-weight: 900 !important; color: var(--eco-y) !important; line-height: 1 !important; } .eco-dm-label { font-size: 11px !important; color: rgba(255, 255, 255, 0.4) !important; margin-top: 6px !important; font-weight: 500 !important; } .eco-dash-bar-row { display: flex !important; flex-direction: column !important; gap: 12px !important; } .eco-db-item { display: flex !important; align-items: center !important; gap: 12px !important; } .eco-db-plat { font-size: 12px !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.6) !important; width: 60px !important; flex-shrink: 0 !important; } .eco-db-track { flex: 1 !important; height: 6px !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 3px !important; overflow: hidden !important; } .eco-db-fill { height: 100% !important; border-radius: 3px !important; transition: width 1.6s var(--eco-ease) !important; width: 0; } .eco-db-fill.meta { background: var(--eco-meta) !important; } .eco-db-fill.google { background: var(--eco-google) !important; } .eco-db-fill.tiktok { background: var(--eco-y) !important; } .eco-db-fill.amazon { background: var(--eco-amazon) !important; } .eco-db-pct { font-size: 12px !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.6) !important; width: 36px !important; text-align: right !important; flex-shrink: 0 !important; } .eco-hero-plat-row { display: flex !important; gap: 12px !important; margin-top: 24px !important; flex-wrap: wrap !important; } .eco-hp-badge { display: flex !important; align-items: center !important; gap: 12px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 100px !important; padding: 10px 20px !important; backdrop-filter: blur(12px) !important; transition: all 0.4s var(--eco-ease) !important; cursor: default !important; position: relative !important; overflow: hidden !important; } .eco-hp-badge::after { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(circle at center, var(--glow-color, transparent) 0%, transparent 70%) !important; opacity: 0 !important; transition: opacity 0.4s ease !important; pointer-events: none !important; } .eco-hp-badge:hover { transform: translateY(-3px) !important; border-color: rgba(255, 255, 255, 0.2) !important; background: rgba(255, 255, 255, 0.07) !important; box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important; } .eco-hp-badge:hover::after { opacity: 0.15 !important; } .eco-hp-badge.meta { --glow-color: #0080fb !important; } .eco-hp-badge.google { --glow-color: #ea4335 !important; } .eco-hp-badge.tiktok { --glow-color: #fe2c55 !important; } .eco-hp-badge.amazon { --glow-color: #ff9900 !important; } .eco-hp-badge.meta:hover { box-shadow: 0 10px 30px -5px rgba(0, 128, 251, 0.25) !important; } .eco-hp-badge.google:hover { box-shadow: 0 10px 30px -5px rgba(234, 67, 53, 0.25) !important; } .eco-hp-badge.tiktok:hover { box-shadow: 0 10px 30px -5px rgba(254, 44, 85, 0.25) !important; } .eco-hp-badge.amazon:hover { box-shadow: 0 10px 30px -5px rgba(255, 153, 0, 0.25) !important; } .eco-hp-icon { width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; border-radius: 6px !important; padding: 4px !important; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } .eco-hp-badge:hover .eco-hp-icon { transform: scale(1.1) rotate(5deg) !important; } .eco-hp-icon svg { width: 100% !important; height: 100% !important; object-fit: contain !important; } .eco-hp-name { font-size: 13px !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.5) !important; letter-spacing: 0.5px !important; transition: color 0.3s ease !important; } .eco-hp-badge:hover .eco-hp-name { color: #fff !important; } .eco-marquee { background: var(--eco-y) !important; padding: 15px 0 !important; overflow: hidden !important; position: relative !important; } .eco-marquee-track { display: flex !important; width: max-content !important; white-space: nowrap !important; animation: ecoMq 30s linear infinite; } .eco-marquee:hover .eco-marquee-track { animation-play-state: paused !important; } .eco-marquee-item { display: inline-flex !important; align-items: center !important; gap: 16px !important; padding: 0 28px !important; font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; color: var(--eco-black) !important; flex-shrink: 0 !important; } .eco-marquee-item .dot { width: 5px !important; height: 5px !important; background: rgba(0, 0, 0, 0.3) !important; border-radius: 50% !important; flex-shrink: 0 !important; } @keyframes ecoMq { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } .eco-pm-fail { padding: 120px 0 !important; background: var(--eco-white) !important; position: relative !important; overflow: hidden !important; } .eco-pm-fail::before { content: '' !important; position: absolute !important; right: 0 !important; top: 0 !important; bottom: 0 !important; width: 45% !important; background: var(--eco-light) !important; border-radius: 60px 0 0 60px !important; z-index: 0 !important; } .eco-fail-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 80px !important; align-items: center !important; } .eco-fail-left { position: relative !important; z-index: 1 !important; } .eco-fail-lead { font-size: 17px !important; line-height: 1.8 !important; color: var(--eco-gray) !important; margin-bottom: 12px !important; } .eco-fail-lead2 { font-size: 16px !important; line-height: 1.8 !important; color: var(--eco-gray) !important; margin-bottom: 48px !important; } .eco-fail-lead2 strong { color: var(--eco-black) !important; font-weight: 800 !important; } .eco-fail-items { display: flex !important; flex-direction: column !important; gap: 14px !important; } .eco-fail-item { display: flex !important; align-items: flex-start !important; gap: 18px !important; background: var(--eco-white) !important; border-radius: 16px !important; padding: 24px !important; border: 1.5px solid var(--eco-light) !important; transition: all 0.4s var(--eco-ease) !important; position: relative !important; overflow: hidden !important; } .eco-fail-item::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 4px !important; background: var(--eco-y) !important; transform: scaleY(0) !important; transform-origin: top !important; transition: transform 0.4s ease !important; } .eco-fail-item:hover::before { transform: scaleY(1) !important; } .eco-fail-item:hover { border-color: rgba(253, 203, 0, 0.4) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important; transform: translateX(8px) !important; } .eco-fail-icon { width: 42px !important; height: 42px !important; background: var(--eco-black) !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: background 0.4s ease !important; } .eco-fail-item:hover .eco-fail-icon { background: var(--eco-y) !important; } .eco-fail-icon svg { width: 20px !important; height: 20px !important; stroke: var(--eco-y) !important; stroke-width: 2 !important; fill: none !important; transition: stroke 0.4s ease !important; } .eco-fail-item:hover .eco-fail-icon svg { stroke: var(--eco-black) !important; } .eco-fail-title { font-size: 15px !important; font-weight: 800 !important; color: var(--eco-black) !important; margin-bottom: 4px !important; line-height: 1.3 !important; } .eco-fail-desc { font-size: 13px !important; color: var(--eco-gray) !important; line-height: 1.6 !important; margin: 0 !important; } .eco-fail-right { position: relative !important; z-index: 1 !important; } .eco-fail-vis-card { background: var(--eco-white) !important; border-radius: 24px !important; padding: 40px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.1) !important; border: 1px solid var(--eco-light) !important; } .eco-fail-vis-label { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--eco-gray) !important; margin-bottom: 24px !important; } .eco-fstat-row { display: flex !important; flex-direction: column !important; gap: 4px !important; } .eco-fstat { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 16px 12px !important; border-bottom: 1px solid var(--eco-light) !important; border-radius: 8px !important; transition: background 0.3s ease !important; } .eco-fstat:last-child { border-bottom: none !important; } .eco-fstat:hover { background: var(--eco-cream) !important; } .eco-fstat-name { font-size: 13px !important; font-weight: 700 !important; color: var(--eco-black) !important; width: 120px !important; } .eco-fstat-bar-wrap { flex: 1 !important; margin: 0 20px !important; height: 8px !important; background: var(--eco-light) !important; border-radius: 4px !important; overflow: hidden !important; } .eco-fstat-bar { height: 100% !important; border-radius: 4px !important; background: linear-gradient(to right, var(--eco-y), var(--eco-yd)) !important; width: 0; transition: width 1.4s var(--eco-ease) !important; } .eco-fstat-val { font-size: 14px !important; font-weight: 900 !important; color: var(--eco-black) !important; width: 40px !important; text-align: right !important; } .eco-fail-vis-foot { margin-top: 32px !important; background: var(--eco-black) !important; border-radius: 16px !important; padding: 24px !important; display: flex !important; align-items: center !important; gap: 16px !important; } .eco-fail-foot-icon { width: 44px !important; height: 44px !important; background: var(--eco-y) !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .eco-fail-foot-icon svg { width: 22px !important; height: 22px !important; stroke: var(--eco-black) !important; stroke-width: 2.5 !important; fill: none !important; } .eco-fail-foot-text { font-size: 13.5px !important; color: rgba(255, 255, 255, 0.6) !important; line-height: 1.6 !important; margin: 0 !important; } .eco-fail-foot-text strong { color: var(--eco-white) !important; font-weight: 800 !important; } .eco-pm-diff { background: var(--eco-black) !important; padding: 100px 0 !important; position: relative !important; overflow: hidden !important; text-align: center !important; } .eco-pm-diff::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 800px !important; height: 800px !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.12) 0%, transparent 55%) !important; border-radius: 50% !important; pointer-events: none !important; } .eco-diff-inner { max-width: 860px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; } .eco-diff-kicker { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.3) !important; margin-bottom: 24px !important; } .eco-diff-headline { font-size: clamp(30px, 6vw, 68px) !important; font-weight: 900 !important; color: var(--eco-white) !important; line-height: 1.05 !important; letter-spacing: -2px !important; margin-bottom: 28px !important; } .eco-diff-headline span { color: var(--eco-y) !important; } .eco-diff-desc { font-size: 17px !important; line-height: 1.85 !important; color: rgba(255, 255, 255, 0.6) !important; margin-bottom: 16px !important; max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; } .eco-diff-desc2 { font-size: 15px !important; line-height: 1.8 !important; color: rgba(255, 255, 255, 0.4) !important; max-width: 600px !important; margin: 0 auto 52px !important; } .eco-diff-pills { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; } .eco-diff-pill { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.8) !important; font-size: 13px !important; font-weight: 600 !important; padding: 12px 24px !important; border-radius: 100px !important; transition: all 0.35s ease !important; cursor: default !important; } .eco-diff-pill:hover { background: var(--eco-y) !important; color: var(--eco-black) !important; border-color: var(--eco-y) !important; transform: translateY(-4px) !important; } .eco-diff-pill svg { width: 16px !important; height: 16px !important; stroke: currentColor !important; fill: none !important; stroke-width: 2 !important; } .eco-pm-channels { background: var(--eco-cream) !important; padding: 120px 0 !important; position: relative !important; overflow: hidden !important; } .eco-channels-hdr { text-align: center !important; margin-bottom: 72px !important; } .eco-channels-hdr p.sub { font-size: 16px !important; color: var(--eco-gray) !important; max-width: 600px !important; margin: 0 auto !important; line-height: 1.8 !important; } .eco-channels-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; } .eco-ch-card { border-radius: 28px !important; padding: 48px !important; position: relative !important; overflow: hidden !important; transition: transform 0.45s var(--eco-ease), box-shadow 0.45s var(--eco-ease) !important; cursor: default !important; } .eco-ch-card:hover { transform: translateY(-12px) !important; box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15) !important; } .eco-ch-card.meta { background: linear-gradient(135deg, #001f5c 0%, #0a2e80 100%) !important; } .eco-ch-card.google { background: linear-gradient(135deg, #1a0a00 0%, #2d1200 100%) !important; } .eco-ch-card.tiktok { background: linear-gradient(135deg, #0a0a0a 0%, #181818 100%) !important; } .eco-ch-card.amazon { background: linear-gradient(135deg, #2d1f00 0%, #3d2900 100%) !important; } .eco-ch-card::before { content: '' !important; position: absolute !important; right: -80px !important; top: -80px !important; width: 300px !important; height: 300px !important; border-radius: 50% !important; opacity: 0.15 !important; pointer-events: none !important; } .eco-ch-card.meta::before { background: var(--eco-meta) !important; } .eco-ch-card.google::before { background: var(--eco-google) !important; } .eco-ch-card.tiktok::before { background: #69C9D0 !important; } .eco-ch-card.amazon::before { background: var(--eco-amazon) !important; } .eco-ch-card::after { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; opacity: 0.7 !important; } .eco-ch-card.meta::after { background: var(--eco-meta) !important; } .eco-ch-card.google::after { background: var(--eco-google) !important; } .eco-ch-card.tiktok::after { background: linear-gradient(to right, #69C9D0, #EE1D52) !important; } .eco-ch-card.amazon::after { background: var(--eco-amazon) !important; } .eco-ch-top { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; margin-bottom: 32px !important; position: relative !important; z-index: 1 !important; } .eco-ch-icon { width: 64px !important; height: 64px !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .eco-ch-card.meta .eco-ch-icon { background: rgba(0, 128, 251, 0.2) !important; } .eco-ch-card.google .eco-ch-icon { background: rgba(234, 67, 53, 0.2) !important; } .eco-ch-card.tiktok .eco-ch-icon { background: rgba(105, 201, 208, 0.15) !important; } .eco-ch-card.amazon .eco-ch-icon { background: rgba(255, 153, 0, 0.18) !important; } .eco-ch-tag { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; padding: 8px 16px !important; border-radius: 100px !important; border: 1px solid !important; } .eco-ch-card.meta .eco-ch-tag { color: rgba(0, 128, 251, 0.9) !important; border-color: rgba(0, 128, 251, 0.3) !important; background: rgba(0, 128, 251, 0.1) !important; } .eco-ch-card.google .eco-ch-tag { color: rgba(234, 67, 53, 1) !important; border-color: rgba(234, 67, 53, 0.3) !important; background: rgba(234, 67, 53, 0.1) !important; } .eco-ch-card.tiktok .eco-ch-tag { color: rgba(105, 201, 208, 1) !important; border-color: rgba(105, 201, 208, 0.3) !important; background: rgba(105, 201, 208, 0.1) !important; } .eco-ch-card.amazon .eco-ch-tag { color: rgba(255, 153, 0, 1) !important; border-color: rgba(255, 153, 0, 0.3) !important; background: rgba(255, 153, 0, 0.1) !important; } .eco-ch-title { font-size: 26px !important; font-weight: 900 !important; color: var(--eco-white) !important; margin-bottom: 16px !important; line-height: 1.2 !important; position: relative !important; z-index: 1 !important; } .eco-ch-desc { font-size: 15px !important; line-height: 1.8 !important; color: rgba(255, 255, 255, 0.6) !important; position: relative !important; z-index: 1 !important; } .eco-ch-metrics { display: flex !important; gap: 32px !important; margin-top: 36px !important; position: relative !important; z-index: 1 !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; padding-top: 32px !important; } .eco-ch-metric { display: flex !important; flex-direction: column !important; } .eco-ch-m-num { font-size: 22px !important; font-weight: 900 !important; color: var(--eco-y) !important; line-height: 1 !important; } .eco-ch-m-label { font-size: 11px !important; color: rgba(255, 255, 255, 0.4) !important; margin-top: 6px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 1px !important; } .eco-pm-process { background: var(--eco-black) !important; position: relative !important; z-index: 5 !important; } .eco-pm-process-track { position: relative !important; height: auto !important; min-height: 0 !important; } .eco-pm-process-sticky { position: relative !important; height: auto !important; display: flex !important; align-items: flex-start !important; padding: 100px 0 !important; overflow: visible !important; } .eco-pm-process-sticky::before { content: '' !important; position: absolute !important; width: 600px !important; height: 600px !important; top: -100px !important; right: -150px !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.08) 0%, transparent 60%) !important; border-radius: 50% !important; pointer-events: none !important; } .eco-pm-process-inner { max-width: 1200px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; width: 100% !important; padding: 0 15px !important; } .eco-pm-process-hdr { text-align: center !important; margin-bottom: 48px !important; } .eco-pm-process-steps { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 0 !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 4px !important; margin-bottom: 32px !important; overflow: hidden !important; } .eco-pm-proc-step { background: transparent !important; border: none !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 40px 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; cursor: pointer !important; transition: all 0.3s ease !important; position: relative !important; z-index: 2 !important; } .eco-pm-proc-step:last-child { border-right: none !important; } .eco-pm-proc-step.active { background: rgba(255, 255, 255, 0.08) !important; } .eco-pm-proc-bubble { width: 64px !important; height: 64px !important; border-radius: 50% !important; background: #111 !important; color: var(--eco-y) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; font-weight: 900 !important; margin-bottom: 24px !important; transition: all 0.3s ease !important; } .eco-pm-proc-step.active .eco-pm-proc-bubble { background: var(--eco-y) !important; color: #000 !important; box-shadow: 0 0 40px rgba(253, 203, 0, 0.6) !important; transform: scale(1.15) !important; } .eco-pm-proc-title { font-size: 15px !important; font-weight: 800 !important; color: #fff !important; margin-bottom: 8px !important; } .eco-pm-proc-step.active .eco-pm-proc-title { color: var(--eco-y) !important; } .eco-pm-proc-desc { font-size: 12px !important; color: rgba(255, 255, 255, 0.3) !important; line-height: 1.4 !important; margin: 0 !important; } .eco-pm-proc-step.active .eco-pm-proc-desc { color: rgba(255, 255, 255, 0.7) !important; } .eco-pm-proc-detail-wrap { position: relative !important; min-height: 220px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 20px !important; overflow: hidden !important; } .eco-pm-proc-detail { position: absolute !important; inset: 0 !important; padding: 48px !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 20px !important; opacity: 0 !important; transform: translateY(20px) !important; transition: opacity 0.5s var(--eco-ease), transform 0.5s var(--eco-ease) !important; pointer-events: none !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .eco-pm-proc-detail.show { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } .eco-pm-pd-num { font-size: 12px !important; font-weight: 800 !important; color: var(--eco-y) !important; letter-spacing: 2px !important; text-transform: uppercase !important; margin-bottom: 12px !important; } .eco-pm-pd-title { font-size: 28px !important; font-weight: 800 !important; color: var(--eco-white) !important; margin-bottom: 16px !important; } .eco-pm-pd-text { font-size: 16px !important; color: rgba(255, 255, 255, 0.6) !important; line-height: 1.8 !important; max-width: 900px !important; margin: 0 !important; } .eco-pm-pd-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: auto !important; padding-top: 32px !important; } .eco-pm-pd-hint { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; color: rgba(255, 255, 255, 0.4) !important; } .eco-pm-pd-hint svg { width: 16px !important; height: 16px !important; stroke: rgba(255, 255, 255, 0.4) !important; stroke-width: 2 !important; fill: none !important; } .eco-pm-proc-scroll-hint { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 11px !important; font-weight: 800 !important; color: rgba(255, 255, 255, 0.3) !important; letter-spacing: 2px !important; text-transform: uppercase !important; animation: ecoScrollHint 2s ease-in-out infinite !important; } @keyframes ecoScrollHint { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(4px); opacity: 1; } } .eco-pm-proc-scroll-hint svg { width: 14px !important; height: 14px !important; stroke: rgba(255, 255, 255, 0.3) !important; stroke-width: 2 !important; fill: none !important; } .eco-pm-gain { background: var(--eco-white) !important; padding: 120px 0 !important; position: relative !important; overflow: hidden !important; } .eco-pm-gain::before { content: '' !important; position: absolute !important; left: -160px !important; top: 50% !important; transform: translateY(-50%) !important; width: 600px !important; height: 600px !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.06) 0%, transparent 65%) !important; border-radius: 50% !important; pointer-events: none !important; } .eco-gain-inner { max-width: 1200px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; padding: 0 15px !important; } .eco-gain-hdr { text-align: center !important; margin-bottom: 64px !important; } .eco-gain-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; align-items: start !important; } .eco-gain-left { display: flex !important; flex-direction: column !important; gap: 16px !important; } .eco-gain-item { display: flex !important; gap: 20px !important; align-items: flex-start !important; background: var(--eco-light) !important; border-radius: 20px !important; padding: 32px !important; transition: all 0.4s var(--eco-ease) !important; cursor: default !important; position: relative !important; overflow: hidden !important; border: 1px solid transparent !important; } .eco-gain-item::before { content: '' !important; position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: var(--eco-y) !important; transform: scaleX(0) !important; transform-origin: left !important; transition: transform 0.45s var(--eco-ease) !important; } .eco-gain-item:hover::before { transform: scaleX(1) !important; } .eco-gain-item:hover { background: var(--eco-cream) !important; transform: translateX(8px) !important; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06) !important; border-color: rgba(253, 203, 0, 0.3) !important; } .eco-gain-item-icon { width: 48px !important; height: 48px !important; border-radius: 12px !important; background: var(--eco-y) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: transform 0.4s var(--eco-ease) !important; } .eco-gain-item:hover .eco-gain-item-icon { transform: scale(1.1) rotate(-5deg) !important; } .eco-gain-item-icon svg { width: 22px !important; height: 22px !important; stroke: var(--eco-black) !important; stroke-width: 2 !important; fill: none !important; } .eco-gain-item-title { font-size: 16px !important; font-weight: 800 !important; color: var(--eco-black) !important; margin-bottom: 8px !important; line-height: 1.3 !important; } .eco-gain-item-desc { font-size: 14px !important; color: var(--eco-gray) !important; line-height: 1.7 !important; margin: 0 !important; } .eco-gain-right { position: relative !important; } .eco-gain-visual-card { background: var(--eco-black) !important; border-radius: 32px !important; padding: 48px !important; position: relative !important; overflow: hidden !important; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15) !important; } .eco-gain-visual-card::before { content: '' !important; position: absolute !important; top: -100px !important; right: -100px !important; width: 350px !important; height: 350px !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.15) 0%, transparent 65%) !important; border-radius: 50% !important; pointer-events: none !important; } .eco-gain-visual-card-label { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.4) !important; margin-bottom: 32px !important; } .eco-gain-big-stat { margin-bottom: 40px !important; } .eco-gain-big-stat-num { font-size: 80px !important; font-weight: 900 !important; color: var(--eco-y) !important; line-height: 1 !important; letter-spacing: -3px !important; font-feature-settings: "tnum" !important; } .eco-gain-big-stat-suffix { font-size: 40px !important; font-weight: 900 !important; color: var(--eco-y) !important; letter-spacing: -1px !important; } .eco-gain-big-stat-label { font-size: 15px !important; color: rgba(255, 255, 255, 0.5) !important; margin-top: 12px !important; line-height: 1.6 !important; } .eco-gain-mini-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important; } .eco-gain-mini { background: rgba(255, 255, 255, 0.04) !important; border-radius: 16px !important; padding: 24px !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; transition: border-color 0.4s ease !important; } .eco-gain-mini:hover { border-color: rgba(253, 203, 0, 0.3) !important; } .eco-gain-mini-num { font-size: 32px !important; font-weight: 900 !important; color: var(--eco-white) !important; line-height: 1 !important; } .eco-gain-mini-num span { font-size: 18px !important; font-weight: 700 !important; color: var(--eco-y) !important; } .eco-gain-mini-label { font-size: 12px !important; color: rgba(255, 255, 255, 0.4) !important; margin-top: 8px !important; font-weight: 500 !important; } .eco-gain-sparkline { display: flex !important; align-items: flex-end !important; gap: 6px !important; height: 50px !important; margin-top: 40px !important; } .eco-spark-bar { flex: 1 !important; background: rgba(253, 203, 0, 0.15) !important; border-radius: 4px 4px 0 0 !important; transition: all 0.6s var(--eco-ease) !important; cursor: default !important; } .eco-spark-bar:hover { background: var(--eco-y) !important; } .eco-spark-bar.hi { background: rgba(253, 203, 0, 0.4) !important; } .eco-pm-who { background: var(--eco-cream) !important; padding: 120px 0 !important; position: relative !important; overflow: hidden !important; } .eco-who-inner { max-width: 1200px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 80px !important; align-items: center !important; padding: 0 15px !important; } .eco-who-img-col { position: relative !important; } .eco-who-img-wrap { border-radius: 28px !important; overflow: hidden !important; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15) !important; } .eco-who-img-wrap img { width: 100% !important; height: 540px !important; object-fit: cover !important; transition: transform 0.7s var(--eco-ease) !important; } .eco-who-img-wrap:hover img { transform: scale(1.05) !important; } .eco-who-img-badge { position: absolute !important; bottom: 32px !important; left: 32px !important; right: 32px !important; background: rgba(0, 0, 0, 0.85) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-radius: 16px !important; padding: 24px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } .eco-who-img-badge-title { font-size: 15px !important; font-weight: 800 !important; color: var(--eco-white) !important; margin-bottom: 8px !important; line-height: 1.3 !important; } .eco-who-img-badge-sub { font-size: 13px !important; color: rgba(255, 255, 255, 0.5) !important; line-height: 1.6 !important; margin: 0 !important; } .eco-who-text-col .sec-title { margin-bottom: 20px !important; } .eco-who-text-col .sec-title em { font-style: normal !important; background: var(--eco-y) !important; padding: 0 10px !important; border-radius: 6px !important; } .eco-who-text-col>p { font-size: 16px !important; color: var(--eco-gray) !important; line-height: 1.8 !important; margin-bottom: 40px !important; } .eco-who-list { display: flex !important; flex-direction: column !important; gap: 14px !important; } .eco-who-item { display: flex !important; align-items: center !important; gap: 16px !important; background: var(--eco-white) !important; border-radius: 16px !important; padding: 22px 24px !important; transition: all 0.4s var(--eco-ease) !important; cursor: default !important; border: 1.5px solid transparent !important; position: relative !important; overflow: hidden !important; } .eco-who-item::after { content: '' !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 4px !important; background: var(--eco-y) !important; transform: scaleY(0) !important; transform-origin: top !important; transition: transform 0.4s ease !important; } .eco-who-item:hover::after { transform: scaleY(1) !important; } .eco-who-item:hover { border-color: rgba(253, 203, 0, 0.3) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06) !important; transform: translateX(8px) !important; } .eco-who-item-check { width: 34px !important; height: 34px !important; border-radius: 8px !important; background: var(--eco-y) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; transition: transform 0.4s var(--eco-ease) !important; } .eco-who-item:hover .eco-who-item-check { transform: scale(1.15) rotate(-5deg) !important; } .eco-who-item-check svg { width: 16px !important; height: 16px !important; stroke: var(--eco-black) !important; stroke-width: 3 !important; fill: none !important; } .eco-who-item-text { font-size: 15px !important; font-weight: 600 !important; color: var(--eco-black) !important; line-height: 1.4 !important; margin: 0 !important; } .eco-pm-cta { background: linear-gradient(180deg, #FDCB00 0%, #e0b400 100%) !important; padding: 140px 0 !important; text-align: center !important; position: relative !important; overflow: hidden !important; } .eco-cta-orb { position: absolute !important; border-radius: 50% !important; pointer-events: none !important; will-change: transform !important; } .eco-cta-orb-1 { width: 500px !important; height: 500px !important; top: -140px !important; right: -100px !important; background: rgba(0, 0, 0, 0.05) !important; animation: ctaO1 14s ease-in-out infinite !important; } .eco-cta-orb-2 { width: 400px !important; height: 400px !important; bottom: -120px !important; left: -80px !important; background: rgba(0, 0, 0, 0.04) !important; animation: ctaO2 16s ease-in-out infinite !important; } .eco-cta-orb-3 { width: 120px !important; height: 120px !important; top: 18% !important; left: 8% !important; background: rgba(0, 0, 0, 0.05) !important; animation: ctaO3 10s ease-in-out infinite !important; } .eco-cta-orb-4 { width: 80px !important; height: 80px !important; bottom: 22% !important; right: 14% !important; background: rgba(0, 0, 0, 0.06) !important; animation: ctaO3 12s ease-in-out 1s infinite reverse !important; } @keyframes ctaO1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-40px, 50px) scale(1.08); } 66% { transform: translate(30px, 25px) scale(0.95); } } @keyframes ctaO2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(50px, -40px) scale(1.1); } 66% { transform: translate(-25px, -20px) scale(0.92); } } @keyframes ctaO3 { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; } 50% { transform: translate(28px, 36px) scale(1.3); opacity: 1; } } .eco-cta-inner { max-width: 760px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; padding: 0 15px !important; } .eco-cta-eyebrow { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: rgba(0, 0, 0, 0.08) !important; color: var(--eco-black) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 12px 24px !important; border-radius: 100px !important; margin-bottom: 28px !important; } .eco-cta-title { font-size: clamp(34px, 6vw, 64px) !important; font-weight: 900 !important; color: var(--eco-black) !important; line-height: 1.2 !important; letter-spacing: -2px !important; margin-bottom: 20px !important; } .eco-cta-sub { font-size: 17px !important; line-height: 1.8 !important; color: rgba(0, 0, 0, 0.6) !important; margin-bottom: 48px !important; max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 1024px) { .eco-pm-hero { padding: 110px 0 70px !important; min-height: auto !important; } .eco-pm-hero-inner { grid-template-columns: 1fr !important; gap: 48px !important; text-align: center !important; } .eco-pm-hero-sub, .eco-pm-hero-sub2 { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } .eco-pm-hero-ctas { justify-content: center !important; width: 100% !important; } .eco-pm-fail { padding: 90px 0 !important; } .eco-pm-fail::before { display: none !important; } .eco-fail-inner { grid-template-columns: 1fr !important; gap: 60px !important; } .eco-pm-diff { padding: 80px 0 !important; } .eco-pm-channels { padding: 90px 0 !important; } .eco-channels-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .eco-pm-gain { padding: 90px 0 !important; } .eco-gain-grid { grid-template-columns: 1fr !important; gap: 48px !important; } .eco-pm-who { padding: 90px 0 !important; } .eco-who-inner { grid-template-columns: 1fr !important; gap: 56px !important; } .eco-pm-cta { padding: 90px 0 !important; } .eco-pm-process-track { height: auto !important; } .eco-pm-process-sticky { position: relative !important; height: auto !important; padding: 90px 0 !important; display: block !important; } .eco-pm-process-steps { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding-bottom: 20px !important; margin-left: -15px !important; margin-right: -15px !important; padding-left: 15px !important; padding-right: 15px !important; scrollbar-width: none !important; -ms-overflow-style: none !important; background: transparent !important; border: none !important; margin-bottom: 32px !important; } .eco-pm-process-steps::-webkit-scrollbar { display: none !important; } .eco-pm-proc-step { flex: 0 0 75% !important; scroll-snap-align: center !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 16px !important; background: rgba(255, 255, 255, 0.03) !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 24px !important; } .eco-pm-proc-step.active { background: rgba(253, 203, 0, 0.08) !important; border-color: rgba(253, 203, 0, 0.3) !important; } .eco-pm-proc-bubble { margin-bottom: 16px !important; width: 56px !important; height: 56px !important; font-size: 16px !important; } .eco-pm-proc-title { font-size: 15px !important; margin-bottom: 4px !important; } .eco-pm-proc-desc { display: block !important; font-size: 11px !important; opacity: 0.6 !important; } .eco-pm-proc-detail { position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; padding: 32px 24px !important; display: none !important; margin-bottom: 12px !important; min-height: auto !important; } .eco-pm-proc-detail.show { display: flex !important; } .eco-pm-pd-title { font-size: 24px !important; } .eco-pm-proc-detail-wrap { display: block !important; background: transparent !important; border: none !important; min-height: auto !important; } } @media (max-width: 640px) { .eco-pm-hero-ctas, .eco-pm-cta__actions { flex-direction: column !important; align-items: stretch !important; width: 100% !important; } .eco-btn-y, .eco-btn-outline, .eco-btn-dark { justify-content: center !important; width: 100% !important; } .eco-dash-metrics { grid-template-columns: 1fr !important; gap: 24px !important; } .eco-hero-plat-row { flex-wrap: wrap !important; } .eco-hp-badge { min-width: 45% !important; } .eco-fail-item, .eco-ch-card, .eco-gain-item, .eco-gain-visual-card, .eco-who-item { padding: 28px 20px !important; } .eco-ch-top { flex-direction: column !important; gap: 16px !important; } .eco-gain-mini-stats { grid-template-columns: 1fr !important; } .eco-who-img-wrap img { height: 400px !important; } .eco-marquee-item { padding: 0 20px !important; font-size: 11px !important; } }/* End custom CSS */