/* Zenzo AI — "The Zenzo ecosystem" v2: tabbed product showcase.
   Each product: copy on the left, a gradient stage on the right with a real photo and
   floating product cards. Tabs auto-advance (paused on hover/focus, stopped on click). */

/* ═══ Tabs ═══ */
.e2-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.e2-tab { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--bdr); transition: border-color .2s, box-shadow .2s, background .2s; }
.e2-tab:hover { border-color: #FDBA74; }
.e2-tab[aria-selected="true"] { border-color: #FDBA74; background: linear-gradient(180deg, #FFFAF5, #fff); box-shadow: 0 0 0 4px rgba(249,115,22,.08), 0 18px 36px -26px rgba(194,87,10,.5); }
.e2-tab-ic { width: 38px; height: 38px; flex-shrink: 0; }
.e2-tab-ic svg { width: 38px; height: 38px; }
.e2-tab:not([aria-selected="true"]) .e2-tab-ic { filter: saturate(.55); opacity: .85; }
.e2-tab-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.e2-tab-t b { font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e2-tab-t small { font-size: 12.5px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e2-tab .badge { align-self: flex-start; }
.e2-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--or); transform: scaleX(0); transform-origin: 0 50%; }
.e2-tab[aria-selected="true"] .e2-prog { transform: scaleX(1); opacity: .25; }
.eco2.is-auto .e2-tab[aria-selected="true"] .e2-prog { opacity: 1; animation: e2Prog var(--e2-dur, 7s) linear forwards; }
.eco2.is-paused .e2-tab[aria-selected="true"] .e2-prog { animation-play-state: paused; }
@keyframes e2Prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ═══ Panel ═══ */
.e2-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 28px; }
.e2-panel[hidden] { display: none; }
.e2-panel:focus-visible { outline: 2px solid var(--or); outline-offset: 8px; border-radius: 20px; }

.e2-k { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--or-dk); }
.e2-copy h3 { margin-top: 18px; font-size: clamp(30px, 3vw, 44px); font-weight: 400; line-height: 1.08; letter-spacing: -.05em; color: var(--t1); }
.e2-copy h3 em { font-style: normal; color: var(--or); }
.e2-copy > p { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: var(--t3); max-width: 500px; }
.e2-copy ul { list-style: none; margin-top: 26px; display: grid; gap: 12px; }
.e2-copy li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--t2); }
.e2-copy li svg { width: 30px; height: 30px; padding: 7px; flex-shrink: 0; border-radius: 9px; color: var(--or-dk); background: var(--or-l); border: 1px solid var(--or-b); }
#e2p-brain .e2-copy li svg { color: var(--t3); background: var(--bg-s); border-color: var(--bdr); }
.e2-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.e2-more { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--t1); border-bottom: 1px solid rgba(15,14,13,.3); padding-bottom: 2px; transition: color .15s, border-color .15s; }
.e2-more svg { width: 14px; height: 14px; transition: transform .15s; }
.e2-more:hover { color: var(--or-dk); border-color: var(--or); }
.e2-more:hover svg { transform: translateX(3px); }

/* ═══ Stage: gradient + photo + floating cards ═══ */
.e2-stage { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1.08; border-radius: 28px; }
.e2-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1.2px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(70% 60% at 15% 85%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 15% 85%, #000, transparent 75%); }
.g-analyst   { background: radial-gradient(60% 55% at 12% 10%, rgba(255,237,213,.85), transparent 70%), linear-gradient(140deg, #FDBA74 0%, #FB923C 40%, #EA580C 100%); }
.g-bi        { background: radial-gradient(60% 55% at 12% 10%, rgba(254,243,199,.9), transparent 70%), linear-gradient(140deg, #FDE68A 0%, #FBBF24 38%, #F97316 100%); }
.g-knowledge { background: radial-gradient(60% 55% at 12% 10%, rgba(254,215,170,.75), transparent 70%), linear-gradient(140deg, #FB923C 0%, #F97316 40%, #B8430A 100%); }
.g-brain     { background: radial-gradient(60% 55% at 85% 12%, rgba(249,115,22,.55), transparent 70%), linear-gradient(140deg, #1A0A00 0%, #4A1A06 50%, #9A3412 100%); }

.e2-photo { position: absolute; right: 7%; top: 9%; width: 58%; height: 82%; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 60px -28px rgba(60,20,0,.6); border: 4px solid rgba(255,255,255,.55); }
.e2-tag { position: absolute; z-index: 3; top: 18px; right: 18px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #FED7AA; background: rgba(26,10,0,.75); border: 1px solid rgba(253,186,116,.4); padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px); }

.e2-card { position: absolute; z-index: 2; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(28,25,23,.06), 0 22px 44px -18px rgba(60,20,0,.42); font-size: 13px; line-height: 1.45; color: var(--t2); }
.e2-card.c1 { top: 13%; left: 5%; max-width: 54%; }
.e2-card.c2 { bottom: 9%; left: 5%; width: 52%; max-width: 330px; }
.e2-card.c3 { bottom: 4.5%; right: 4.5%; }

.e2-q { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; font-size: 13.5px; color: var(--t1); border: 1px solid #FED7AA; }
.e2-q b { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--or); color: #fff; display: flex; align-items: center; justify-content: center; }
.e2-q b svg { width: 14px; height: 14px; }

.e2-ans { padding: 14px 16px 16px; }
.e2-ans-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.e2-ans-top small, .e2-kpi small, .e2-plan > small { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); }
.e2-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: #15803D; background: #F0FDF4; border: 1px solid #BBF7D0; padding: 2px 8px; border-radius: 999px; }
.e2-ok svg { width: 10px; height: 10px; }
.e2-ans p { margin-top: 8px; color: var(--t2); }
.e2-ans p b { color: var(--t1); font-weight: 600; }
.e2-ans p em { font-style: normal; color: var(--or-dk); font-weight: 600; }
.e2-ans sup { font-size: 9px; color: var(--or-dk); font-weight: 600; }
.e2-bars { margin-top: 12px; display: grid; gap: 7px; }
.e2-bars div { display: grid; grid-template-columns: 92px 1fr 30px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--t3); }
.e2-bars i { height: 6px; border-radius: 3px; background: var(--bdr-l); overflow: hidden; }
.e2-bars s { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #FB923C, #EA580C); }
.e2-bars s.neg { background: linear-gradient(90deg, #F87171, #DC2626); }
.e2-bars b { text-align: right; color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; }
.e2-cite { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bdr-l); display: flex; gap: 10px; align-items: flex-start; }
.e2-cite > span { width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; background: var(--or-l); color: var(--or-dk); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.e2-cite b { display: block; font-size: 12.5px; color: var(--t1); font-weight: 500; }
.e2-cite small { font-size: 11.5px; color: var(--t3); }

.e2-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12.5px; font-weight: 500; color: var(--t1); border-radius: 999px; }
.e2-chip img { width: 18px; height: 18px; object-fit: contain; }
.e2-chip img + img { margin-left: -4px; }
.e2-chip-ic { width: 15px; height: 15px; color: var(--or-dk); }

.e2-kpi { padding: 14px 16px 10px; width: 210px; }
.e2-kpi-v { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.e2-kpi-v b { font-size: 28px; font-weight: 500; letter-spacing: -.03em; color: var(--t1); font-variant-numeric: tabular-nums; }
.e2-kpi-v em { font-style: normal; font-size: 12px; font-weight: 600; color: #15803D; }
.e2-spark { display: block; width: 100%; height: 34px; margin-top: 6px; }

.e2-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.e2-alert-ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: #FEF2F2; color: #DC2626; display: flex; align-items: center; justify-content: center; }
.e2-alert-ic svg { width: 16px; height: 16px; }
.e2-alert b { display: block; font-size: 13.5px; color: var(--t1); font-weight: 600; }
.e2-alert small { font-size: 12px; color: var(--t3); }

.e2-plan { padding: 14px 16px; display: grid; gap: 9px; }
.e2-step { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--t3); }
.e2-step b { color: var(--t1); font-weight: 600; }
.e2-step i { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-s); border: 1px solid var(--bdr); color: var(--t3); }
.e2-step i svg { width: 11px; height: 11px; }
.e2-step.done i { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.e2-step:not(.done) i { border-style: dashed; border-color: #FDBA74; color: var(--or-dk); }

/* ═══ Entrance motion (only when motion is allowed) ═══ */
.mo .e2-panel.on .e2-copy > * { animation: e2Up .5s var(--ease) both; }
.mo .e2-panel.on .e2-copy > :nth-child(2) { animation-delay: .04s; }
.mo .e2-panel.on .e2-copy > :nth-child(3) { animation-delay: .08s; }
.mo .e2-panel.on .e2-copy > :nth-child(n+4) { animation-delay: .12s; }
.mo .e2-panel.on .e2-photo { animation: e2Photo .7s var(--ease) both; }
.mo .e2-panel.on .e2-card { animation: e2Pop .55s var(--ease) both; }
.mo .e2-panel.on .e2-card.c1 { animation-delay: .25s; }
.mo .e2-panel.on .e2-card.c2 { animation-delay: .45s; }
.mo .e2-panel.on .e2-card.c3 { animation-delay: .65s; }
.mo .e2-panel.on .e2-bars s { animation: e2Bar .8s .7s var(--ease) both; transform-origin: 0 50%; }
.mo .e2-panel.on .e2-card { will-change: transform; }
.mo .e2-panel.on .e2-card.c3 { animation: e2Pop .55s .65s var(--ease) both, e2Float 5s 1.4s ease-in-out infinite; }
@keyframes e2Up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes e2Photo { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes e2Pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes e2Bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes e2Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.eco2 .eco-layer { margin-top: 40px; }

/* ═══ Responsive ═══ */
@media (max-width: 1240px) {
  .e2-tab .badge { display: none; }
}
@media (max-width: 1000px) {
  .e2-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .e2-stage { order: -1; aspect-ratio: 1.25; }
  .e2-copy > p { max-width: none; }
}
@media (max-width: 768px) {
  .e2-tabs { display: flex; overflow-x: auto; gap: 8px; margin: 0 -18px; padding: 2px 18px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .e2-tabs::-webkit-scrollbar { display: none; }
  .e2-tab { flex: 0 0 auto; scroll-snap-align: start; padding: 10px 14px 10px 10px; gap: 10px; }
  .e2-tab-ic, .e2-tab-ic svg { width: 30px; height: 30px; }
  .e2-tab-t small { display: none; }
  .e2-tab-t b { font-size: 14px; }
  .e2-panel { margin-top: 20px; }
  .e2-stage { aspect-ratio: .95; border-radius: 22px; }
  .e2-photo { right: 6%; top: 7%; width: 64%; height: 70%; border-radius: 16px; border-width: 3px; }
  .e2-card { font-size: 11.5px; border-radius: 12px; }
  .e2-card.c1 { top: 6%; left: 4%; max-width: 62%; }
  .e2-card.c2 { bottom: 5%; left: 4%; width: 66%; }
  .e2-card.c3 { display: none; }
  .e2-q { font-size: 12px; padding: 8px 8px 8px 11px; gap: 8px; }
  .e2-q b { width: 24px; height: 24px; }
  .e2-ans, .e2-plan, .e2-alert { padding: 11px 12px; }
  .e2-bars div { grid-template-columns: 80px 1fr 26px; font-size: 10.5px; }
  .e2-kpi { width: 170px; padding: 11px 12px 8px; }
  .e2-kpi-v b { font-size: 22px; }
  .e2-copy h3 { font-size: clamp(28px, 8vw, 36px); }
  .e2-copy > p { font-size: 15px; }
  .e2-copy li { font-size: 14px; }
  .e2-ctas .btn-dark { flex: 1 1 auto; justify-content: center; }
  .eco2 .eco-layer { margin-top: 28px; }
}
.e2-lg { width: 20px; height: 20px; border-radius: 6px; background: var(--c); display: inline-flex; align-items: center; justify-content: center; }
.e2-lg img { width: 12px; height: 12px; filter: brightness(0) invert(1); }
.e2-lg + .e2-lg { margin-left: -2px; box-shadow: 0 0 0 2px #fff; }