.elementor-2738 .elementor-element.elementor-element-92d37b4{--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-2738 .elementor-element.elementor-element-0bed053{--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-2738 .elementor-element.elementor-element-b1283c0{--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-2738 .elementor-element.elementor-element-bb36d49{--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-2738 .elementor-element.elementor-element-bb95176{--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-2738 .elementor-element.elementor-element-6f58e48{--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-2738 .elementor-element.elementor-element-c0d406f{--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-2738 .elementor-element.elementor-element-0658392{--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-2738 .elementor-element.elementor-element-6cbfb0e{--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-2738 .elementor-element.elementor-element-cc08b83{--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-amz: #FF9900 !important; --eco-amz-dk: #e07b00 !important; --eco-green: #22c55e !important; --eco-red: #ef4444 !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.2 !important; letter-spacing: -1px !important; color: var(--eco-black) !important; margin-bottom: 24px !important; padding-bottom: 0.1em !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-w { 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-w: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: 10px !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; border: none !important; cursor: pointer !important; transition: all 0.4s var(--eco-ease) !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important; } .eco-btn-dark:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important; background: var(--eco-black) !important; color: var(--eco-y) !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-ag-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-ag-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-ag-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-h-orb { position: absolute !important; border-radius: 50% !important; pointer-events: none !important; z-index: 0 !important; will-change: transform !important; } .eco-h-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: hOrb1 9s ease-in-out infinite !important; } .eco-h-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: hOrb2 12s ease-in-out infinite !important; } .eco-h-orb-3 { width: 300px !important; height: 300px !important; top: 30% !important; right: 25% !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.05) 0%, transparent 65%) !important; animation: hOrb1 8s ease-in-out 2s infinite reverse !important; } @keyframes hOrb1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -50px); } } @keyframes hOrb2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 40px); } } .eco-ag-hero-inner { display: grid !important; grid-template-columns: 1.05fr 1fr !important; gap: 72px !important; align-items: center !important; } .eco-ag-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-ag-hero-badge-dot { width: 7px !important; height: 7px !important; background: var(--eco-y) !important; border-radius: 50% !important; animation: pulse 2s ease-in-out infinite; } .eco-ag-hero-title { font-size: clamp(36px, 5.5vw, 68px) !important; font-weight: 900 !important; line-height: 1.25 !important; letter-spacing: -2px !important; color: var(--eco-white) !important; margin-bottom: 28px !important; padding-bottom: 0.15em !important; } .eco-ag-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: shimmer 3.5s linear 1.2s infinite; } .eco-ag-hero-sub { font-size: 16px !important; line-height: 1.85 !important; color: rgba(255, 255, 255, 0.6) !important; margin-bottom: 14px !important; max-width: 540px !important; } .eco-ag-hero-sub2 { font-size: 15px !important; line-height: 1.8 !important; color: rgba(255, 255, 255, 0.4) !important; margin-bottom: 40px !important; max-width: 540px !important; } .eco-ag-hero-sub2 strong { color: rgba(255, 255, 255, 0.8) !important; font-weight: 600 !important; } .eco-ag-hero-ctas { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; position: relative !important; z-index: 5 !important; } .eco-ag-hero-stats-mob { display: none !important; } @media (max-width: 1024px) { .eco-ag-hero-stats-mob { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; margin: 32px 0 !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 20px !important; backdrop-filter: blur(10px) !important; } .eco-ag-hero-stat-item { text-align: center !important; } .eco-ag-hero-stat-val { display: block !important; font-size: 20px !important; font-weight: 900 !important; color: var(--eco-y) !important; line-height: 1 !important; margin-bottom: 6px !important; } .eco-ag-hero-stat-lbl { display: block !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; color: rgba(255, 255, 255, 0.4) !important; font-weight: 600 !important; } } .eco-ag-mockup { position: relative !important; z-index: 2 !important; } .eco-listing-card { background: rgba(16, 16, 16, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6) !important; } .eco-listing-card-img { width: 100% !important; height: 240px !important; background: #0a0a0a !important; position: relative !important; overflow: hidden !important; } .eco-listing-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .eco-listing-card-img-badge { position: absolute !important; top: 16px !important; left: 16px !important; background: var(--eco-amz) !important; color: var(--eco-black) !important; font-size: 10px !important; font-weight: 900 !important; padding: 6px 12px !important; border-radius: 6px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; } .eco-listing-card-rank { position: absolute !important; top: 16px !important; right: 16px !important; background: rgba(0, 0, 0, 0.85) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 153, 0, 0.4) !important; border-radius: 8px !important; padding: 8px 12px !important; text-align: center !important; } .eco-listing-card-rank-num { font-size: 16px !important; font-weight: 900 !important; color: var(--eco-amz) !important; line-height: 1 !important; display: block !important; } .eco-listing-card-rank-label { font-size: 9px !important; color: rgba(255, 255, 255, 0.5) !important; font-weight: 600 !important; letter-spacing: 0.5px !important; margin-top: 4px !important; display: block !important; } .eco-listing-card-body { padding: 24px !important; } .eco-listing-card-title { font-size: 14px !important; font-weight: 700 !important; color: var(--eco-white) !important; line-height: 1.5 !important; margin-bottom: 12px !important; } .eco-listing-card-stars { display: flex !important; align-items: center !important; gap: 8px !important; margin-bottom: 16px !important; } .eco-listing-card-star { color: var(--eco-amz) !important; font-size: 14px !important; } .eco-listing-card-rating { font-size: 12px !important; color: rgba(255, 255, 255, 0.5) !important; } .eco-listing-card-price { font-size: 26px !important; font-weight: 900 !important; color: var(--eco-white) !important; margin-bottom: 20px !important; } .eco-listing-card-price span { font-size: 14px !important; font-weight: 400 !important; color: rgba(255, 255, 255, 0.4) !important; margin-left: 8px !important; text-decoration: line-through !important; } .eco-listing-card-btn { width: 100% !important; background: var(--eco-amz) !important; color: var(--eco-black) !important; font-size: 14px !important; font-weight: 800 !important; padding: 14px !important; border-radius: 8px !important; border: none !important; cursor: default !important; letter-spacing: 0.5px !important; } .eco-listing-card-metrics { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; background: rgba(255, 255, 255, 0.08) !important; } .eco-listing-card-metric { padding: 18px 12px !important; background: rgba(0, 0, 0, 0.6) !important; text-align: center !important; } .eco-listing-card-metric-val { font-size: 18px !important; font-weight: 900 !important; color: var(--eco-y) !important; display: block !important; line-height: 1 !important; margin-bottom: 6px !important; } .eco-listing-card-metric-label { font-size: 10px !important; color: rgba(255, 255, 255, 0.4) !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } .eco-hero-chip { position: absolute !important; display: flex !important; align-items: center !important; gap: 12px !important; background: rgba(10, 10, 10, 0.85) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; padding: 14px 20px !important; white-space: nowrap !important; z-index: 2 !important; } .eco-hero-chip-icon { width: 36px !important; height: 36px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; overflow: hidden !important; } .eco-hero-chip-icon svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; } .eco-hero-chip-text { font-size: 13px !important; font-weight: 700 !important; color: var(--eco-white) !important; margin-bottom: 2px !important; } .eco-hero-chip-sub { font-size: 11px !important; color: rgba(255, 255, 255, 0.5) !important; } .eco-hc1 { top: -24px !important; left: -30px !important; animation: chipF1 6s ease-in-out infinite; } .eco-hc2 { bottom: 20px !important; left: -40px !important; animation: chipF2 7.5s ease-in-out infinite; } .eco-hc3 { top: 50% !important; right: -30px !important; animation: chipF1 8s ease-in-out 1s infinite; } @keyframes chipF1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes chipF2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } .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-ag-struggle { padding: 120px 0 !important; background: var(--eco-white) !important; position: relative !important; overflow: hidden !important; } .eco-struggle-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 80px !important; align-items: center !important; } .eco-struggle-lead { font-size: 17px !important; line-height: 1.8 !important; color: var(--eco-gray) !important; margin-bottom: 12px !important; } .eco-struggle-lead2 { font-size: 16px !important; line-height: 1.8 !important; color: var(--eco-gray) !important; margin-bottom: 48px !important; } .eco-struggle-lead2 strong { color: var(--eco-black) !important; font-weight: 800 !important; } .eco-struggle-problems { display: flex !important; flex-direction: column !important; gap: 14px !important; } .eco-struggle-item { display: flex !important; align-items: flex-start !important; gap: 18px !important; background: var(--eco-light) !important; border-radius: 16px !important; padding: 24px !important; border: 1.5px solid transparent !important; transition: all 0.4s var(--eco-ease) !important; position: relative !important; overflow: hidden !important; } .eco-struggle-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-struggle-item:hover::before { transform: scaleY(1) !important; } .eco-struggle-item:hover { background: var(--eco-cream) !important; border-color: rgba(253, 203, 0, 0.4) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06) !important; transform: translateX(8px) !important; } .eco-struggle-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; margin-top: 2px !important; } .eco-struggle-item:hover .eco-struggle-icon { background: var(--eco-y) !important; } .eco-struggle-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-struggle-item:hover .eco-struggle-icon svg { stroke: var(--eco-black) !important; } .eco-struggle-title { font-size: 15px !important; font-weight: 800 !important; color: var(--eco-black) !important; margin-bottom: 6px !important; line-height: 1.3 !important; } .eco-struggle-sub { font-size: 13px !important; color: var(--eco-gray) !important; line-height: 1.6 !important; margin: 0 !important; } .eco-ceiling-visual { position: relative !important; } .eco-ceiling-card { background: var(--eco-black) !important; border-radius: 28px !important; padding: 40px !important; color: var(--eco-white) !important; position: relative !important; overflow: hidden !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15) !important; } .eco-ceiling-card::before { content: '' !important; position: absolute !important; top: -80px !important; right: -80px !important; width: 300px !important; height: 300px !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.15) 0%, transparent 65%) !important; border-radius: 50% !important; pointer-events: none !important; } .eco-ceiling-label { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.4) !important; margin-bottom: 32px !important; } .eco-ceiling-chart { position: relative !important; height: 200px !important; margin-bottom: 32px !important; } .eco-cc-bg-lines { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .eco-cc-bg-line { height: 1px !important; background: rgba(255, 255, 255, 0.06) !important; width: 100% !important; } .eco-cc-bars { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; display: flex !important; align-items: flex-end !important; gap: 6px !important; height: 100% !important; } .eco-cc-bar { flex: 1 !important; border-radius: 4px 4px 0 0 !important; position: relative !important; transition: height 1.4s var(--eco-ease) !important; height: 0; } .eco-cc-bar.good { background: var(--eco-y) !important; } .eco-cc-bar.plateau { background: rgba(255, 255, 255, 0.15) !important; } .eco-cc-ceiling-line { position: absolute !important; left: 0 !important; right: 0 !important; height: 2px !important; background: var(--eco-red) !important; top: 0 !important; border-radius: 2px !important; } .eco-cc-ceiling-label { position: absolute !important; right: 0 !important; top: -22px !important; font-size: 10px !important; font-weight: 800 !important; color: var(--eco-red) !important; letter-spacing: 1px !important; white-space: nowrap !important; } .eco-ceiling-insight { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 24px !important; position: relative !important; z-index: 2 !important; } .eco-ceiling-insight-title { font-size: 14px !important; font-weight: 800 !important; color: var(--eco-white) !important; margin-bottom: 8px !important; } .eco-ceiling-insight-text { font-size: 13px !important; color: rgba(255, 255, 255, 0.5) !important; line-height: 1.6 !important; margin-bottom: 16px !important; } .eco-ceiling-tag { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: rgba(253, 203, 0, 0.12) !important; border: 1px solid rgba(253, 203, 0, 0.25) !important; color: var(--eco-y) !important; font-size: 11px !important; font-weight: 800 !important; padding: 8px 16px !important; border-radius: 100px !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; } .eco-ceiling-tag svg { width: 14px !important; height: 14px !important; stroke: var(--eco-y) !important; fill: none !important; stroke-width: 2.5 !important; } .eco-ag-ecosystem { background: var(--eco-black) !important; padding: 120px 0 !important; position: relative !important; overflow: hidden !important; } .eco-ag-ecosystem::before { content: '' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 900px !important; height: 900px !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.1) 0%, transparent 60%) !important; border-radius: 50% !important; pointer-events: none !important; } .eco-eco-hdr { text-align: center !important; margin-bottom: 72px !important; position: relative !important; z-index: 1 !important; } .eco-eco-hdr p.sub { font-size: 16px !important; color: rgba(255, 255, 255, 0.5) !important; max-width: 640px !important; margin: 0 auto !important; line-height: 1.8 !important; } .eco-wheel { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px !important; max-width: 960px !important; margin: 0 auto !important; position: relative !important; z-index: 1 !important; } .eco-pillar { border-radius: 24px !important; padding: 40px !important; position: relative !important; overflow: hidden !important; border: 1px solid transparent !important; transition: all 0.4s var(--eco-ease) !important; cursor: default !important; } .eco-pillar:hover { transform: translateY(-8px) !important; } .eco-pillar.traffic { background: rgba(0, 128, 251, 0.06) !important; border-color: rgba(0, 128, 251, 0.2) !important; } .eco-pillar.traffic:hover { border-color: rgba(0, 128, 251, 0.5) !important; box-shadow: 0 24px 56px rgba(0, 128, 251, 0.12) !important; } .eco-pillar.listings { background: rgba(253, 203, 0, 0.06) !important; border-color: rgba(253, 203, 0, 0.2) !important; } .eco-pillar.listings:hover { border-color: rgba(253, 203, 0, 0.5) !important; box-shadow: 0 24px 56px rgba(253, 203, 0, 0.12) !important; } .eco-pillar.ads { background: rgba(239, 68, 68, 0.06) !important; border-color: rgba(239, 68, 68, 0.2) !important; } .eco-pillar.ads:hover { border-color: rgba(239, 68, 68, 0.45) !important; box-shadow: 0 24px 56px rgba(239, 68, 68, 0.1) !important; } .eco-pillar.branding { background: rgba(34, 197, 94, 0.06) !important; border-color: rgba(34, 197, 94, 0.2) !important; } .eco-pillar.branding:hover { border-color: rgba(34, 197, 94, 0.45) !important; box-shadow: 0 24px 56px rgba(34, 197, 94, 0.1) !important; } .eco-pillar-num { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; margin-bottom: 20px !important; opacity: 0.6 !important; } .eco-pillar.traffic .eco-pillar-num { color: #60a5fa !important; } .eco-pillar.listings .eco-pillar-num { color: var(--eco-y) !important; } .eco-pillar.ads .eco-pillar-num { color: #f87171 !important; } .eco-pillar.branding .eco-pillar-num { color: #4ade80 !important; } .eco-pillar-icon { width: 64px !important; height: 64px !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 24px !important; transition: transform 0.4s var(--eco-ease) !important; } .eco-pillar:hover .eco-pillar-icon { transform: scale(1.1) rotate(-5deg) !important; } .eco-pillar.traffic .eco-pillar-icon { background: rgba(0, 128, 251, 0.15) !important; } .eco-pillar.listings .eco-pillar-icon { background: rgba(253, 203, 0, 0.15) !important; } .eco-pillar.ads .eco-pillar-icon { background: rgba(239, 68, 68, 0.15) !important; } .eco-pillar.branding .eco-pillar-icon { background: rgba(34, 197, 94, 0.15) !important; } .eco-pillar-icon svg { width: 28px !important; height: 28px !important; stroke-width: 2 !important; fill: none !important; } .eco-pillar.traffic .eco-pillar-icon svg { stroke: #60a5fa !important; } .eco-pillar.listings .eco-pillar-icon svg { stroke: var(--eco-y) !important; } .eco-pillar.ads .eco-pillar-icon svg { stroke: #f87171 !important; } .eco-pillar.branding .eco-pillar-icon svg { stroke: #4ade80 !important; } .eco-pillar-title { font-size: 22px !important; font-weight: 900 !important; color: var(--eco-white) !important; margin-bottom: 12px !important; line-height: 1.2 !important; } .eco-pillar-desc { font-size: 14px !important; line-height: 1.8 !important; color: rgba(255, 255, 255, 0.5) !important; margin-bottom: 24px !important; } .eco-pillar-tag { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-size: 11px !important; font-weight: 800 !important; padding: 8px 16px !important; border-radius: 100px !important; letter-spacing: 0.5px !important; border: 1px solid !important; text-transform: uppercase !important; } .eco-pillar.traffic .eco-pillar-tag { color: #60a5fa !important; border-color: rgba(0, 128, 251, 0.25) !important; background: rgba(0, 128, 251, 0.1) !important; } .eco-pillar.listings .eco-pillar-tag { color: var(--eco-y) !important; border-color: rgba(253, 203, 0, 0.25) !important; background: rgba(253, 203, 0, 0.1) !important; } .eco-pillar.ads .eco-pillar-tag { color: #f87171 !important; border-color: rgba(239, 68, 68, 0.25) !important; background: rgba(239, 68, 68, 0.1) !important; } .eco-pillar.branding .eco-pillar-tag { color: #4ade80 !important; border-color: rgba(34, 197, 94, 0.25) !important; background: rgba(34, 197, 94, 0.1) !important; } .eco-pillar-tag svg { width: 14px !important; height: 14px !important; fill: currentColor !important; } .eco-connect-bar { max-width: 960px !important; margin: 32px auto 0 !important; padding: 24px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 20px !important; text-align: center !important; position: relative !important; z-index: 1 !important; } .eco-connect-bar p { font-size: 15px !important; color: rgba(255, 255, 255, 0.5) !important; line-height: 1.8 !important; margin: 0 !important; } .eco-connect-bar strong { color: var(--eco-white) !important; font-weight: 700 !important; } .eco-ag-manage { background: var(--eco-cream) !important; padding: 120px 0 !important; position: relative !important; overflow: hidden !important; } .eco-manage-hdr { text-align: center !important; margin-bottom: 72px !important; } .eco-manage-hdr p.sub { font-size: 16px !important; color: var(--eco-gray) !important; max-width: 540px !important; margin: 0 auto !important; line-height: 1.8 !important; } .eco-manage-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } .eco-manage-grid .wide { grid-column: span 2 !important; } .eco-svc-card { background: var(--eco-white) !important; border-radius: 24px !important; padding: 40px !important; border: 1px solid rgba(0, 0, 0, 0.04) !important; position: relative !important; overflow: hidden !important; transition: transform 0.4s var(--eco-ease), box-shadow 0.4s var(--eco-ease), border-color 0.4s var(--eco-ease) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important; } .eco-svc-card:hover { border-color: rgba(253, 203, 0, 0.4) !important; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.08) !important; transform: translateY(-8px) !important; } .eco-svc-num { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 2px !important; color: rgba(0, 0, 0, 0.2) !important; margin-bottom: 24px !important; text-transform: uppercase !important; } .eco-svc-icon { width: 64px !important; height: 64px !important; border-radius: 16px !important; background: var(--eco-black) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 28px !important; transition: background 0.4s ease, transform 0.4s var(--eco-ease) !important; } .eco-svc-card:hover .eco-svc-icon { background: var(--eco-y) !important; transform: rotate(-6deg) scale(1.08) !important; } .eco-svc-icon svg { width: 28px !important; height: 28px !important; stroke: var(--eco-y) !important; stroke-width: 1.8 !important; fill: none !important; transition: stroke 0.4s ease !important; } .eco-svc-card:hover .eco-svc-icon svg { stroke: var(--eco-black) !important; } .eco-svc-title { font-size: 18px !important; font-weight: 800 !important; color: var(--eco-black) !important; margin-bottom: 14px !important; line-height: 1.3 !important; } .eco-svc-desc { font-size: 14px !important; line-height: 1.8 !important; color: var(--eco-gray) !important; } .eco-svc-foot { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 24px !important; font-size: 13px !important; font-weight: 700 !important; color: var(--eco-black) !important; opacity: 0 !important; transform: translateY(8px) !important; transition: all 0.4s ease !important; } .eco-svc-card:hover .eco-svc-foot { opacity: 1 !important; transform: none !important; } .eco-svc-foot svg { width: 16px !important; height: 16px !important; stroke: var(--eco-black) !important; stroke-width: 2.5 !important; fill: none !important; transition: transform 0.3s ease !important; } .eco-svc-card:hover .eco-svc-foot svg { transform: translateX(4px) !important; } .eco-wide-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; align-items: center !important; height: 100% !important; } .eco-wide-stats { display: flex !important; flex-direction: column !important; gap: 16px !important; align-self: center !important; } .eco-ws-box { background: var(--eco-light) !important; border-radius: 16px !important; padding: 20px 24px !important; } .eco-ws-label { font-size: 12px !important; color: var(--eco-gray) !important; font-weight: 700 !important; margin-bottom: 6px !important; text-transform: uppercase !important; letter-spacing: 1px !important; } .eco-ws-val { font-size: 28px !important; font-weight: 900 !important; color: var(--eco-black) !important; line-height: 1 !important; display: flex !important; align-items: baseline !important; gap: 6px !important; } .eco-ws-val span { font-size: 14px !important; font-weight: 600 !important; color: var(--eco-green) !important; } .eco-ag-process { background: var(--eco-black) !important; position: relative !important; z-index: 5 !important; } .eco-ag-process-track { position: relative !important; height: auto !important; } .eco-ag-process-sticky { position: relative !important; top: 0 !important; height: auto !important; display: flex !important; align-items: center !important; padding: 100px 0 !important; overflow: hidden !important; } .eco-ag-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-ag-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-ag-process-hdr { text-align: center !important; margin-bottom: 48px !important; } .eco-ag-process-steps { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; margin-bottom: 24px !important; overflow: hidden !important; border-radius: 4px !important; } .eco-ag-proc-step { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 36px 16px !important; position: relative !important; cursor: pointer !important; z-index: 2 !important; border: none !important; border-right: 1px solid rgba(255, 255, 255, 0.08) !important; background: transparent !important; transition: all 0.4s var(--eco-ease) !important; } .eco-ag-proc-step:last-child { border-right: none !important; } .eco-ag-proc-step:hover { background: rgba(255, 255, 255, 0.02) !important; } .eco-ag-proc-step.active { background: rgba(255, 255, 255, 0.08) !important; } .eco-ag-proc-bubble { width: 64px !important; height: 64px !important; border-radius: 50% !important; background: #111 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; color: var(--eco-y) !important; margin-bottom: 20px !important; transition: all 0.4s var(--eco-ease) !important; } .eco-ag-proc-step.active .eco-ag-proc-bubble { background: var(--eco-y) !important; color: var(--eco-black) !important; box-shadow: 0 0 32px rgba(253, 203, 0, 0.5) !important; transform: scale(1.1) !important; } .eco-ag-proc-title { font-size: 15px !important; color: rgba(255, 255, 255, 0.4) !important; transition: color 0.4s !important; margin-bottom: 8px !important; font-weight: 700 !important; } .eco-ag-proc-desc { font-size: 12px !important; color: rgba(255, 255, 255, 0.2) !important; line-height: 1.4 !important; transition: color 0.4s !important; margin: 0 !important; } .eco-ag-proc-step.active .eco-ag-proc-title { color: var(--eco-y) !important; } .eco-ag-proc-step.active .eco-ag-proc-desc { color: rgba(255, 255, 255, 0.6) !important; } .eco-ag-proc-detail-wrap { position: relative !important; min-height: 380px !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 24px !important; overflow: hidden !important; margin-top: 40px !important; } .eco-ag-proc-detail { position: absolute !important; inset: 0 !important; padding: 60px !important; opacity: 0 !important; transform: translateX(30px) !important; transition: all 0.6s var(--eco-ease) !important; pointer-events: none !important; display: grid !important; grid-template-columns: 1.4fr 1fr !important; gap: 48px !important; align-items: center !important; } .eco-ag-proc-detail.show { opacity: 1 !important; transform: none !important; pointer-events: auto !important; } .eco-ag-proc-detail-visual { background: rgba(253, 203, 0, 0.05) !important; border: 1px solid rgba(253, 203, 0, 0.15) !important; border-radius: 20px !important; padding: 32px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; justify-content: center !important; min-height: 240px !important; max-width: 400px !important; width: 100% !important; margin-left: auto !important; } .eco-ag-pd-vis-icon { width: 60px !important; height: 60px !important; background: rgba(253, 203, 0, 0.1) !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 20px !important; } .eco-ag-pd-vis-icon svg { width: 32px !important; height: 32px !important; stroke: var(--eco-y) !important; stroke-width: 1.5 !important; fill: none !important; } .eco-ag-pd-vis-num { font-size: 52px !important; font-weight: 900 !important; color: var(--eco-y) !important; line-height: 1 !important; letter-spacing: -2px !important; margin-bottom: 8px !important; } .eco-ag-pd-vis-label { font-size: 14px !important; color: rgba(255, 255, 255, 0.45) !important; font-weight: 500 !important; line-height: 1.4 !important; } .eco-ag-pd-left { display: flex !important; flex-direction: column !important; justify-content: center !important; height: 100% !important; } .eco-ag-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-ag-pd-title { font-size: 28px !important; font-weight: 900 !important; color: var(--eco-white) !important; margin-bottom: 16px !important; } .eco-ag-pd-text { font-size: 17px !important; color: rgba(255, 255, 255, 0.6) !important; line-height: 1.8 !important; max-width: 800px !important; margin: 0 !important; } .eco-ag-pd-bottom { display: flex !important; align-items: center !important; margin-top: auto !important; padding-top: 32px !important; } .eco-ag-pd-hint { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 13px !important; color: rgba(255, 255, 255, 0.4) !important; font-weight: 500 !important; } .eco-ag-pd-hint svg { width: 18px !important; height: 18px !important; stroke: rgba(255, 255, 255, 0.4) !important; stroke-width: 2 !important; fill: none !important; } .eco-ag-pd-visual { background: rgba(253, 203, 0, 0.08) !important; border: 1px solid rgba(253, 203, 0, 0.2) !important; border-radius: 16px !important; padding: 32px 24px !important; min-width: 200px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .eco-ag-pd-vis-icon { width: 48px !important; height: 48px !important; background: rgba(253, 203, 0, 0.15) !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 16px !important; } .eco-ag-pd-vis-icon svg { width: 24px !important; height: 24px !important; stroke: var(--eco-y) !important; stroke-width: 2 !important; fill: none !important; } .eco-ag-pd-vis-num { font-size: 36px !important; font-weight: 900 !important; color: var(--eco-y) !important; line-height: 1 !important; margin-bottom: 8px !important; } .eco-ag-pd-vis-label { font-size: 12px !important; color: rgba(255, 255, 255, 0.6) !important; line-height: 1.4 !important; font-weight: 500 !important; } .eco-ag-proc-scroll-hint { position: absolute !important; bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important; 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; } @keyframes ecoScrollHint { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; } 50% { transform: translateX(-50%) translateY(5px); opacity: 1; } } .eco-ag-results { background: var(--eco-white) !important; padding: 120px 0 !important; position: relative !important; overflow: hidden !important; } .eco-ag-results::after { content: '' !important; position: absolute !important; right: -160px !important; top: 50% !important; transform: translateY(-50%) !important; width: 600px !important; height: 600px !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.07) 0%, transparent 65%) !important; border-radius: 50% !important; pointer-events: none !important; } .eco-results-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; position: relative !important; z-index: 1 !important; padding: 0 15px !important; } .eco-results-left .sec-title { margin-bottom: 40px !important; } .eco-results-list { display: flex !important; flex-direction: column !important; gap: 16px !important; } .eco-result-item { display: flex !important; align-items: flex-start !important; gap: 20px !important; background: var(--eco-light) !important; border-radius: 20px !important; padding: 24px 28px !important; transition: all 0.4s var(--eco-ease) !important; cursor: default !important; position: relative !important; overflow: hidden !important; border: 1px solid transparent !important; } .eco-result-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.4s ease !important; } .eco-result-item:hover::before { transform: scaleX(1) !important; } .eco-result-item:hover { background: var(--eco-cream) !important; transform: translateX(8px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06) !important; border-color: rgba(253, 203, 0, 0.3) !important; } .eco-result-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-result-item:hover .eco-result-icon { transform: scale(1.1) rotate(-5deg) !important; } .eco-result-icon svg { width: 22px !important; height: 22px !important; stroke: var(--eco-black) !important; stroke-width: 2 !important; fill: none !important; } .eco-result-title { font-size: 16px !important; font-weight: 800 !important; color: var(--eco-black) !important; margin-bottom: 6px !important; line-height: 1.3 !important; } .eco-result-desc { font-size: 14px !important; color: var(--eco-gray) !important; line-height: 1.65 !important; margin: 0 !important; } .eco-rank-dashboard { background: var(--eco-black) !important; border-radius: 28px !important; padding: 40px !important; position: relative !important; overflow: hidden !important; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.15) !important; } .eco-rank-dashboard::before { content: '' !important; position: absolute !important; top: -80px !important; right: -80px !important; width: 300px !important; height: 300px !important; background: radial-gradient(circle, rgba(253, 203, 0, 0.15) 0%, transparent 65%) !important; border-radius: 50% !important; pointer-events: none !important; } .eco-rank-label { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.4) !important; margin-bottom: 24px !important; } .eco-rank-main { display: flex !important; align-items: baseline !important; gap: 8px !important; margin-bottom: 12px !important; } .eco-rank-main-num { font-size: 80px !important; font-weight: 900 !important; color: var(--eco-y) !important; line-height: 1 !important; letter-spacing: -4px !important; font-feature-settings: "tnum" !important; } .eco-rank-main-suffix { font-size: 32px !important; font-weight: 900 !important; color: var(--eco-y) !important; letter-spacing: -1px !important; } .eco-rank-main-label { font-size: 15px !important; color: rgba(255, 255, 255, 0.5) !important; line-height: 1.6 !important; margin-bottom: 40px !important; } .eco-rank-bars { display: flex !important; flex-direction: column !important; gap: 20px !important; margin-bottom: 32px !important; } .eco-rank-bar-item { display: flex !important; flex-direction: column !important; gap: 8px !important; } .eco-rank-bar-top { display: flex !important; justify-content: space-between !important; align-items: center !important; } .eco-rank-bar-name { font-size: 13px !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.6) !important; } .eco-rank-bar-val { font-size: 14px !important; font-weight: 800 !important; color: var(--eco-white) !important; } .eco-rank-bar-val.up { color: var(--eco-green) !important; } .eco-rank-bar-track { height: 8px !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 4px !important; overflow: hidden !important; } .eco-rank-bar-fill { 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-rank-footer { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 20px 24px !important; display: flex !important; align-items: center !important; gap: 16px !important; } .eco-rank-footer svg { width: 24px !important; height: 24px !important; stroke: var(--eco-y) !important; stroke-width: 2 !important; fill: none !important; flex-shrink: 0 !important; } .eco-rank-footer p { font-size: 14px !important; color: rgba(255, 255, 255, 0.6) !important; line-height: 1.6 !important; font-weight: 500 !important; margin: 0 !important; } .eco-ag-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; 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-ag-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; } .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; } .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; } .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; } @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.05 !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-ag-hero { padding: 100px 0 60px !important; min-height: auto !important; } .eco-ag-hero-inner { grid-template-columns: 1fr !important; text-align: center !important; gap: 32px !important; } .eco-ag-hero-badge, .eco-ag-hero-ctas { justify-content: center !important; } .eco-ag-hero-sub, .eco-ag-hero-sub2 { margin-left: auto !important; margin-right: auto !important; } .eco-ag-hero-stats-mob { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; margin: 32px 0 20px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 20px !important; backdrop-filter: blur(10px) !important; } .eco-ag-mockup { display: flex !important; flex-direction: column !important; align-items: center !important; transform: scale(0.85) !important; width: 100% !important; margin: 0 auto !important; } .eco-ag-mockup>div:first-child { width: 100% !important; max-width: 480px !important; } .eco-hero-chip { display: none !important; } .eco-ag-process { padding: 80px 0 !important; } .eco-ag-process-track { height: auto !important; } .eco-ag-process-sticky { position: relative !important; height: auto !important; padding: 60px 0 !important; display: block !important; } .eco-ag-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: 10px 20px 30px !important; margin-left: -20px !important; margin-right: -20px !important; scrollbar-width: none !important; -ms-overflow-style: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; } .eco-ag-process-steps::-webkit-scrollbar { display: none !important; } .eco-ag-proc-step { flex: 0 0 80% !important; scroll-snap-align: center !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 24px 16px !important; background: rgba(255, 255, 255, 0.03) !important; } .eco-ag-proc-step.active { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(253, 203, 0, 0.15) !important; } .eco-ag-proc-bubble { width: 50px !important; height: 50px !important; font-size: 14px !important; margin-bottom: 14px !important; } .eco-ag-proc-title { font-size: 16px !important; margin-bottom: 4px !important; } .eco-ag-proc-desc { display: block !important; font-size: 13px !important; opacity: 0.6 !important; } .eco-ag-proc-detail-wrap { min-height: auto !important; margin-top: 24px !important; border-radius: 20px !important; background: transparent !important; border: none !important; } .eco-ag-proc-detail { position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; padding: 40px 24px !important; display: none !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 16px !important; grid-template-columns: 1fr !important; gap: 28px !important; } .eco-ag-pd-left { height: auto !important; } .eco-ag-proc-detail-visual { min-height: 180px !important; padding: 24px !important; } .eco-ag-pd-vis-num { font-size: 40px !important; } .eco-ag-proc-detail.show { display: flex !important; flex-direction: column !important; } .eco-ag-proc-detail-visual { min-height: 180px !important; padding: 24px !important; max-width: 100% !important; margin-left: 0 !important; } .eco-ag-pd-title { font-size: 24px !important; } .eco-ag-struggle { padding: 90px 0 !important; } .eco-struggle-inner { grid-template-columns: 1fr !important; gap: 56px !important; } .eco-ag-ecosystem { padding: 90px 0 !important; } .eco-wheel { grid-template-columns: 1fr !important; max-width: 600px !important; } .eco-ag-manage { padding: 90px 0 !important; } .eco-manage-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .eco-manage-grid .wide { grid-column: span 1 !important; } .eco-wide-inner { grid-template-columns: 1fr !important; gap: 24px !important; } .eco-ag-results { padding: 90px 0 !important; } .eco-results-inner { grid-template-columns: 1fr !important; gap: 56px !important; } .eco-ag-who { padding: 90px 0 !important; } .eco-who-inner { grid-template-columns: 1fr !important; gap: 56px !important; } .eco-ag-cta { padding: 90px 0 !important; } } @media (max-width: 768px) { .eco-ag-pd-text { font-size: 15px !important; line-height: 1.7 !important; } } @media (max-width: 640px) { .eco-ag-hero-ctas, .eco-cta-actions { flex-direction: column !important; align-items: stretch !important; width: 100% !important; } .eco-btn-y, .eco-btn-outline-w, .eco-btn-dark { justify-content: center !important; width: 100% !important; } .eco-struggle-item, .eco-pillar, .eco-svc-card, .eco-result-item, .eco-who-item { padding: 24px !important; } .eco-who-img-wrap img { height: 400px !important; } .eco-marquee-item { padding: 0 20px !important; font-size: 11px !important; } .eco-ceiling-card, .eco-rank-dashboard { padding: 28px !important; } }/* End custom CSS */