/* ECO PLANTS: nature, infrastructure and connected operations. */
:root { --eco-forest: #102c25; --eco-sage: #edf3ea; }
.section { position: relative; isolation: isolate; scroll-margin-top: 100px; }
.section .eyebrow { color: #366b48; letter-spacing: .12em; font-size: 11px; }
.about-section { background: radial-gradient(ellipse at 0 90%, #dce8c9 0, transparent 48%), #f6f8f2; }
.about-section::before, .value-section::before {
 content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
 background: repeating-radial-gradient(ellipse at 0 100%, transparent 0 48px, #346e4d0a 49px 50px, transparent 51px 75px);
}
.about-landscape { width: 100%; height: 230px; object-fit: cover; border-radius: 24px 24px 5px 5px; }
.about-principles { gap: 0; overflow: hidden; border-radius: 24px; border: 1px solid #cbdccb; background: #f9fcf5; }
.about-principles article { border: 0; border-top: 1px solid #dce7d7; border-radius: 0; box-shadow: none; background: transparent; }
.solutions-section { background: linear-gradient(135deg, #e3efdf, #edf5ed 62%, #dceee7); }
.solutions-grid { gap: 24px; }
.solutions-grid article { position: relative; padding: 0 26px 28px; overflow: hidden; border-radius: 18px; border-color: #c9ddcf; background: #f8fbf5; box-shadow: 0 12px 28px #153b2610; }
.solutions-grid .solution-image { width: calc(100% + 52px); max-width: none; height: 210px; object-fit: cover; margin: 0 -26px 25px; }
.solutions-grid .solution-code { display: inline-flex; align-items: center; gap: 9px; }
.solutions-grid .solution-code::after { content: ''; width: 35px; height: 2px; background: #87b28a; }
.solutions-grid h3 { margin-top: 13px; }
.solutions-grid article:nth-child(2n) { border-bottom: 4px solid #418d85; }
.solutions-grid article:nth-child(2n+1) { border-bottom: 4px solid #679359; }
.visual-note { margin: 20px 0 0; color: #587061; font-size: 12px; }
.platform-flow { background: radial-gradient(ellipse at 50% 100%, #22654a, transparent 70%), #102c25; }
.platform-flow::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(#8bd7b108 1px, transparent 1px), linear-gradient(90deg, #8bd7b108 1px, transparent 1px); background-size: 44px 44px; }
.platform-flow .eyebrow, .project-section .eyebrow, .sustainability-section .eyebrow, .contact .eyebrow { color: #b7df95; }
.flow-grid { position: relative; gap: 16px; }
.flow-grid::before { content: ''; position: absolute; top: 50%; left: 8%; right: 8%; height: 2px; background: #7acba3; box-shadow: 0 0 20px #88e9b6; z-index: -1; }
.flow-grid article { background: #143d32; border-color: #639f7970; box-shadow: 0 16px 25px #061a1a25; }
.flow-grid article > span { display: grid; place-items: center; width: 34px; height: 34px; background: #9adaad; color: #143629; border-radius: 50%; }
.flow-grid h3 { font-size: clamp(18px, 1.6vw, 23px); overflow-wrap: anywhere; }
.flow-grid i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #102c25; }
.intro { background: #f0f3e6; }
.intro-grid article { background: linear-gradient(145deg,#f9fbf1,#e2edda); border-color: #c5d8b8; box-shadow: none; border-radius: 80px 14px 14px 14px; }
.intro-grid .icon { margin-left: 14px; border-radius: 50%; background: #305f3e; }
.capability-section { background: linear-gradient(130deg,#e2eee8,#cedfd8); gap: 48px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
.capability-heading { position: static; }
.capability-heading h2 { font-size: clamp(32px,3.4vw,48px); }
.control-preview { margin: 30px 0 0; padding: 18px; border: 1px solid #426b57; border-radius: 20px; background: #102c25; box-shadow: 0 22px 40px #183f3626; color: #d8efdf; overflow: hidden; }
.control-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; }
.control-caption span { font-size: 10px; color: #acceb4; }
.control-preview img { width: 100%; height: auto; margin: 18px 0; border-radius: 8px; }
.control-preview figcaption { font-size: 12px; color: #acceb4; line-height: 1.6; }
.capability-grid { border-color: #b0c9ba; background: #b0c9ba; border-radius: 18px; }
.capability-grid article { background: #eff5ed; min-height: 170px; padding: 22px; }
.capability-grid h3 { margin-top: 22px; }
.capability-grid article:nth-child(4n+2), .capability-grid article:nth-child(4n+3) { background: #e2eee2; }
.value-section { background: radial-gradient(ellipse at 90% 50%,#dbe9d1,transparent 65%),#f3f6eb; }
.audience-grid article { position: relative; border: 1px solid #b9cfb0; background: #ffffff70; padding-left: 34px; overflow: hidden; }
.audience-grid article::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #6c9763; }
.audience-grid article:nth-child(even)::before { background: #3c8278; }
.process-section { background: #e6ede0; }
.process-list { background: #c3d4ba; }
.process-list li { background: #f1f5e9; }
.process-list > li > span { border-bottom: 3px solid #769a67; align-self: start; padding-bottom: 12px; }
.business-band { background: radial-gradient(ellipse at 50% 24%,#d2e8cb,transparent 60%),#edf3ea; }
.network-hub { position: relative; padding: 42px 0 24px; isolation: isolate; }
.network-orbit { position: absolute; z-index: -1; left: 50%; top: 0; transform: translateX(-50%); width: min(500px,95%); height: 235px; border-radius: 50%; border: 1px solid #99bd91; background: repeating-radial-gradient(ellipse at center, transparent 0 32px,#5f92581c 33px 34px,transparent 35px 55px); }
.network-center { display: flex; flex-direction: column; align-items: center; gap: 6px; width: fit-content; margin: 0 auto 48px; padding: 15px 26px; border-radius: 24px; background: #edf5e9; border: 1px solid #a4c299; box-shadow: 0 10px 32px #294c2820; }
.network-center img { height: 46px; width: auto; }
.network-center strong { font-size: 24px; letter-spacing: .05em; }
.network-center span { color: #526b53; font-size: 9px; letter-spacing: .12em; }
.network-branches { position: relative; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.network-branches::before { content: ''; position: absolute; height: 49px; width: 1px; background: #8cad81; bottom: 100%; left: 50%; z-index: -1; }
.network-filter { min-height: 44px; padding: 12px 24px; background: #f4f8ec; color: #36573e; border: 1px solid #aac59e; border-radius: 30px; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; transition: background .18s,color .18s; }
.network-filter[aria-pressed="true"] { background: #234e35; border-color: #234e35; color: #fff; }
.network-filter:hover { border-color: #234e35; }
.network-filter:focus-visible { outline: 3px solid #407b59; outline-offset: 4px; }
.network-count { color: #506450; font-size: 13px; margin: 12px 0 18px; }
.business-grid { gap: 18px; }
.business-card { background: linear-gradient(145deg,#fafcf5,#e7f1e3); border-color: #bed2b6; border-radius: 16px; box-shadow: none; }
.business-card .domain { margin-top: 0; }
.business-category { display: flex; align-items: center; gap: 7px; color: #3f6550; font-size: 10px; font-weight: 800; letter-spacing: .1em; margin-bottom: 20px; }
.business-category::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sustainability-section { background: #102c25; }
.sustainability-grid article { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: end; min-height: 405px; padding: 24px; background: #143a2f; }
.sustain-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .45s; }
.sustainability-grid article::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,#071f18 0%,#0a211adc 35%,#0a211a0a 100%); }
.sustainability-grid h3 { margin-top: 18px; }
.sustainability-grid p { color: #d8e7dc; }
.insight-section { background: #faf8f1; }
.insight-grid article { border: 0; border-top: 3px solid #68875d; background: linear-gradient(145deg,#f1f0e0,#e6eee1); border-radius: 0 0 20px 20px; }
.faq-section { background: #edf3e7; }
.re100 { background: linear-gradient(90deg,#e5eedeee 0%,#e5eedeea 55%,#e5eedecc),url('assets/eco-solar.webp') center/cover; }
.focus-list div { background: #f5f9eddb; border-color: #b3caab; }
.contact { background: linear-gradient(100deg,#102c25f7,#102c25dd),url('assets/eco-solar.webp') center/cover; }
@media (hover:hover) { .sustainability-grid article:hover .sustain-image { transform: scale(1.045); } }
@media (max-width:1100px) { .capability-section { grid-template-columns: 1fr; } .capability-heading { max-width: none; } .control-preview { max-width: 700px; } .sustainability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:980px) { .flow-grid::before { display: none; } .flow-grid i { display: none; } .flow-grid article { border-left: 3px solid #8bd2a4; } }
@media (max-width:640px) { .solutions-grid .solution-image { height: 205px; } .sustainability-grid { grid-template-columns: 1fr; } .sustainability-grid article { min-height: 350px; } .network-hub { padding-top: 25px; } .network-center { margin-bottom: 35px; } .network-filter { padding: 11px 17px; } .network-branches { gap: 8px; } .about-landscape { height: 200px; } .control-preview { padding: 14px; } .capability-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion:reduce) { .sustain-image,.network-filter { transition: none; } .sustainability-grid article:hover .sustain-image { transform: none; } }