/* Secțiunea „ecosistem” de pe prima pagină (17 oct 2026): șase carduri mari (cinci fără catalogul Search), câte 3 pe rând pe desktop, 2 pe tabletă, 1 pe mobil; ultimul rând incomplet e centrat. Fostele patru carduri mari în stil apple.com — titlu, o frază, un buton
   și dedesubt o ilustrație 3D în stilul propriu (assets/eco/3d-*). Treimea de sus a ilustrației e fundal gol: urcă sub
   text și se estompează în culoarea cardului (--tile = culoarea fundalului ilustrației). Construită de tools/seo_build.js (ecosystem). */
.eco{padding:96px var(--gutter);max-width:1160px;margin:0 auto}
.eco-h{font:650 clamp(30px,4.4vw,52px)/1.08 var(--display);letter-spacing:-.02em;margin:0 auto 40px;max-width:20ch;color:var(--ink);text-align:center;text-wrap:balance}
.eco-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.eco-grid>.eco-tile{flex:0 0 calc((100% - 32px)/3)}
.eco-tile{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:28px;background:var(--tile);isolation:isolate}
.eco-text{flex:0 0 auto;padding:clamp(34px,4.6vw,56px) 24px 0;text-align:center}
.eco-text h3{font:650 clamp(26px,2.2vw,28px)/1.05 var(--display);letter-spacing:-.02em;margin:0 0 8px}
.eco-text p{font-size:clamp(16px,1.45vw,19px);line-height:1.35;margin:0 auto 22px;max-width:30ch;text-wrap:balance;min-height:2.7em}/* două rânduri: butoanele stau pe aceeași linie */
.eco-tile>img{display:block;position:relative;z-index:-1;width:100%;height:auto;flex:1 1 auto;min-height:0;object-fit:cover;object-position:50% 0;
  /* ilustrația (v2-*, 18 oct 2026) stă sub buton; marginea de sus se estompează în culoarea cardului */
  margin-top:2px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%);
  transition:scale .9s cubic-bezier(.2,.7,.2,1);transform-origin:50% 100%}
.eco-tile:hover>img{scale:1.03}
.eco-btn{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;font:600 15px/1 var(--body);text-decoration:none;background:var(--ink);color:#fff;transition:background .2s}
a.eco-btn::after{content:"";position:absolute;inset:0;z-index:2}/* tot cardul se poate apăsa */
a.eco-btn:hover{background:var(--slate-d)}
a.eco-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.eco-btn.off{background:rgba(14,26,51,.08);color:var(--ink-2);cursor:default}
.eco-light{color:var(--ink)}.eco-light p{color:var(--ink-2)}
.eco-dark{color:#f5f5f7}.eco-dark p{color:#aab4c8}
.eco-dark .eco-btn{background:#fff;color:var(--ink)}.eco-dark a.eco-btn:hover{background:#e3e6ec}
.eco-daily{--tile:#d7e2e1}.eco-platform{--tile:#04192e}.eco-engines{--tile:#ddf4f7}.eco-community{--tile:#dfe3f9}.eco-search{--tile:#d5eaf9}.eco-explained{--tile:#e7e2df}
@media(max-width:1020px){.eco-grid>.eco-tile{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:640px){.eco-grid>.eco-tile{flex-basis:100%}}
@media(max-width:900px){
  .eco{padding-top:64px;padding-bottom:64px}
  .eco-h{margin-bottom:28px}
  .eco-grid{gap:14px}
  .eco-tile{border-radius:24px}
}
@media(prefers-reduced-motion:reduce){.eco-tile>img{transition:none}.eco-tile:hover>img{scale:1}}
/* Testele și uneltele gratuite cele mai folosite (GEO etapa 2, 22 oct 2026): carduri mici, două pe rând pe telefon. */
.pop{padding-top:0}
.pop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pop-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:22px;background:#eef3fa;color:var(--ink);text-decoration:none;transition:transform .2s}
.pop-card:hover{transform:translateY(-2px)}
.pop-card img{flex:0 0 56px;width:56px;height:56px;object-fit:contain}
.pop-card b{display:block;font-weight:600;font-size:17px;line-height:1.2}
.pop-card small{display:block;margin-top:2px;font-size:14px;opacity:.65}
@media(max-width:820px){.pop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.pop-card{gap:10px;padding:12px}.pop-card img{flex-basis:44px;width:44px;height:44px}.pop-card b{font-size:15px}}