.tx-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tx-tab{border:1px solid var(--line);background:var(--white);color:#263021;border-radius:999px;padding:9px 14px;font-weight:800;font-size:.76rem;cursor:pointer;transition:.18s}
.tx-tab:hover{border-color:var(--lime);transform:translateY(-1px)}
.tx-tab.on{background:var(--forest);color:var(--lime-2);border-color:var(--forest)}
.tx-panel{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:start}
.tx-visual{position:relative}
.tx-stage{position:relative;aspect-ratio:8/5;border-radius:18px;overflow:hidden;background:var(--forest);box-shadow:0 24px 60px rgba(8,17,6,.35);border:1px solid var(--line-dark);perspective:900px}
.tx-img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .5s,transform 1.2s}
.tx-img.in{opacity:1;transform:scale(1)}
.tx-stage:hover .tx-img{transform:scale(1.03)}
.tx-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(155,229,26,.18) 50%,transparent 60%);height:200%;animation:txscan 5s linear infinite;pointer-events:none}
@keyframes txscan{from{transform:translateY(-60%)}to{transform:translateY(0)}}
.tx-dot{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid var(--lime-2);background:rgba(8,17,6,.55);cursor:pointer;padding:0}
.tx-dot i{position:absolute;inset:8px;border-radius:50%;background:var(--lime-2)}
.tx-dot:after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--lime-2);animation:txping 2s ease-out infinite}
@keyframes txping{from{transform:scale(1);opacity:.9}to{transform:scale(2.2);opacity:0}}
.tx-dot.on{background:var(--lime-2)}.tx-dot.on i{background:var(--forest)}
.tx-dot:focus-visible{outline:3px solid #fff}
.tx-pop{margin-top:12px;background:var(--forest);color:#e6ecd9;border:1px solid var(--line-dark);border-radius:12px;padding:14px 16px;min-height:76px;opacity:.0;transition:.25s;font-size:.86rem}
.tx-pop.show{opacity:1}.tx-pop b{display:block;color:var(--lime-2);margin-bottom:3px;letter-spacing:.02em}
.tx-hint{font-size:.72rem;color:var(--muted);margin-top:8px}
.tx-title{font-size:1.7rem;margin:.2rem 0 .5rem;letter-spacing:-.03em}
.tx-over{color:#3d4636}
.tx-sub{display:flex;gap:6px;margin:18px 0 8px;border-bottom:1px solid var(--line)}
.tx-sub button{background:none;border:0;padding:9px 12px;font-weight:800;font-size:.78rem;cursor:pointer;color:var(--muted);border-bottom:3px solid transparent}
.tx-sub button.on{color:var(--ink);border-color:var(--lime)}
.tx-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.tx-list li{padding:9px 12px 9px 34px;background:var(--white);border:1px solid var(--line);border-radius:10px;position:relative;font-size:.88rem;animation:txin .3s both}
.tx-list li:before{content:"";position:absolute;left:12px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--lime)}
@keyframes txin{from{opacity:0;transform:translateX(-8px)}}
@media(max-width:860px){.tx-panel{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tx-scan,.tx-dot:after,.tx-list li{animation:none}.tx-img{transition:none}}

/* Service card images (services.html) - drop assets/img/services/<name>.jpg and change the src to use a real photo */
.svc-img{aspect-ratio:8/5;margin:-8px -8px 17px;border-radius:12px;overflow:hidden;background:var(--forest);border:1px solid var(--line-dark);box-shadow:0 14px 34px rgba(8,17,6,.28)}
.svc-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.service-card:hover .svc-img img{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){.svc-img img{transition:none}}

/* v18 interactive explorers (assets/flow.js) */
.gsx .tx-hs,.gx-scene,.gx-svg{position:absolute;inset:0;width:100%;height:100%}
.gx-l{stroke:#9be51a;stroke-opacity:.55;stroke-width:2;stroke-dasharray:6 8;animation:gxd 1.2s linear infinite}
@keyframes gxd{to{stroke-dashoffset:-14}}
.gx-p{fill:#eaff7a}
.gx-n{animation:gxf 4s ease-in-out infinite}
@keyframes gxf{50%{transform:translateY(-5px)}}
.gx-n rect{fill:rgba(155,229,26,.10);stroke:#9be51a;stroke-opacity:.5;stroke-width:1.5;transition:.25s}
.gx-n text{fill:#e6ecd9;font:700 14px system-ui,sans-serif}
.gx-n.on rect{fill:rgba(155,229,26,.32);stroke-opacity:1}
.gsx .tx-stage{background:radial-gradient(circle at 50% 40%,#173a1d,#0a1a0d)}
@media(prefers-reduced-motion:reduce){.gx-l,.gx-n{animation:none}}

@media (prefers-reduced-motion: reduce){.gx-p{display:none}}