/* Semantix product page. Built on the site's tokens and patterns (styles.css): #111 cards, #222 borders,
   16px radius, green section titles, pill buttons and the fade-up reveal. Each step is one compact band:
   copy on one side, one concept illustration on the other. Illustrations are anonymised. */

.sx-page { --sx-green:#23b35a; --sx-tile:#0b0b0b; color:var(--text); }
.sx-page *:focus-visible { outline:3px solid #8fe7ad; outline-offset:4px; }
.sx-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.sx-inner { width:100%; max-width:1100px; margin-inline:auto; }
.sx-band { padding:clamp(3.5rem,8vh,5.5rem) clamp(1.5rem,5vw,4rem); border-top:1px solid #1c1c1c; scroll-margin-top:var(--nav-height); }
.sx-band:focus { outline:none; }
.sx-band--tint { background:linear-gradient(180deg,rgba(28,135,67,.035),rgba(28,135,67,0) 70%); }

/* ---------- film ---------- */
.sx-film { padding:calc(var(--nav-height) + clamp(1.5rem,4vw,2.5rem)) clamp(1.5rem,5vw,4rem) 0; }
.sx-film__frame { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:#000; box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 60px rgba(28,135,67,.12); }
.sx-film__frame video { display:block; width:100%; height:100%; background:#000; }
.sx-film__play { position:absolute; left:clamp(.75rem,2.5vw,1.75rem); bottom:clamp(.75rem,2.5vw,1.75rem); display:inline-flex; align-items:center; gap:.85rem; padding:.6rem 1.5rem .6rem .6rem; border:1px solid rgba(255,255,255,.15); border-radius:50px; background:rgba(0,0,0,.72); color:#fff; font:600 1rem/1.2 var(--font); cursor:pointer; backdrop-filter:blur(12px); transition:all .3s var(--ease); }
.sx-film__play:hover { border-color:rgba(28,135,67,.6); transform:translateY(-2px); box-shadow:0 8px 30px rgba(28,135,67,.35); }
.sx-film__icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--primary); box-shadow:0 4px 20px var(--primary-glow); }
.sx-film__icon svg { width:20px; height:20px; margin-left:3px; fill:#fff; }
.sx-film__time { margin-left:.35rem; color:var(--text-muted); font-weight:500; font-variant-numeric:tabular-nums; }

/* ---------- hero + the three steps ---------- */
.sx-hero { padding:clamp(3rem,7vh,4.5rem) clamp(1.5rem,5vw,4rem) clamp(3.5rem,8vh,5rem); text-align:center; }
.sx-kicker { display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1rem; font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.sx-kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--sx-green); box-shadow:0 0 12px var(--primary-glow); }
.sx-hero h1 { max-width:900px; margin:0 auto; font-size:clamp(2.1rem,5vw,3.5rem); line-height:1.15; color:#fff; }
.sx-hero h1 span { display:block; color:var(--primary); text-shadow:0 0 40px var(--primary-glow); }
.sx-hero__lede { max-width:640px; margin:1.25rem auto 0; font-size:clamp(1rem,2vw,1.15rem); line-height:1.7; color:var(--text-muted); }
.sx-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 2rem; margin-top:1.75rem; }
.sx-actions .btn--primary { padding:.85rem 2.25rem; }
.sx-link { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; font-weight:600; font-size:.95rem; color:var(--text); }
.sx-link:hover { color:#23b35a; }
.sx-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; max-width:1100px; margin:clamp(2.5rem,6vh,3.5rem) auto 0; padding:0; list-style:none; text-align:left; }
.sx-steps a { display:flex; gap:1rem; align-items:flex-start; height:100%; padding:1.25rem; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); color:var(--text); transition:all .4s var(--ease); }
.sx-steps a:hover { transform:translateY(-4px); border-color:rgba(28,135,67,.3); box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 40px var(--primary-glow); color:var(--text); }
.sx-steps .sx-icon { flex:none; width:44px; height:auto; margin-top:.15rem; color:var(--primary); }
.sx-steps__role { display:block; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#23b35a; }
.sx-steps strong { display:block; margin:.25rem 0 .35rem; font-size:1.1rem; }
.sx-steps__text { display:block; font-size:.88rem; line-height:1.6; color:var(--text-muted); }

/* ---------- step band: copy + illustration ---------- */
.sx-split { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.sx-split--flip > .sx-copy { order:2; }
.sx-badge { display:flex; width:fit-content; align-items:center; gap:.6rem; margin-bottom:1rem; padding:.3rem .85rem .3rem .3rem; border:1px solid rgba(28,135,67,.45); border-radius:50px; background:var(--bg-card); font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text); }
.sx-badge b { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--primary); color:#fff; font-size:.78rem; letter-spacing:0; }
.sx-copy .section-title { margin-bottom:1rem; font-size:clamp(1.9rem,3.6vw,2.6rem); }
.sx-copy .section-title::after { margin-left:0; }
.sx-statement { font-size:clamp(1.15rem,2vw,1.4rem); font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--text); }
.sx-lede { margin-top:.75rem; font-size:1rem; line-height:1.7; color:var(--text-muted); }
.sx-points { display:grid; gap:.8rem; margin:1.4rem 0 0; padding:0; list-style:none; }
.sx-points li { position:relative; padding-left:1.6rem; font-size:.92rem; line-height:1.55; color:var(--text-muted); }
.sx-points li::before { content:""; position:absolute; left:0; top:.32em; width:14px; height:14px; border-radius:50%; background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.sx-points strong { color:var(--text); font-weight:600; }
.sx-proof { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1rem; margin-top:1.4rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); font-size:.82rem; line-height:1.45; color:var(--text-muted); }
.sx-proof strong { display:block; font-size:1.6rem; line-height:1.1; letter-spacing:-.03em; color:#23b35a; font-variant-numeric:tabular-nums; }
.sx-proof > span { flex:1 1 0; min-width:6rem; }
.sx-proof i { font-style:normal; color:#555; }
.sx-proof small { flex-basis:100%; font-size:.72rem; color:var(--text-dim); }
.sx-next { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem; font-size:.9rem; font-weight:600; color:var(--text); }
.sx-next:hover { color:#23b35a; }

/* illustration frame */
.sx-figure { position:relative; margin:0; padding:clamp(1rem,2.2vw,1.5rem); border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.sx-figure__tag { position:absolute; top:.85rem; right:1rem; font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#5f5f5f; }
.sx-figure figcaption { margin-top:.9rem; font-size:.78rem; line-height:1.5; color:var(--text-dim); }
.sx-tile { padding:.95rem 1rem; border:1px solid #1f1f1f; border-radius:12px; background:var(--sx-tile); }
.sx-tile__head { display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; font-size:.8rem; font-weight:600; color:var(--text); }
.sx-tile__head b { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:var(--primary); color:#fff; font-size:.68rem; }
.sx-line { display:block; height:6px; border-radius:3px; background:#262626; }
.sx-line + .sx-line { margin-top:6px; }
.sx-cite { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:15px; padding:0 4px; border-radius:4px; background:rgba(35,179,90,.16); color:#23b35a; font-size:.62rem; font-weight:700; }

/* 1 · company research: four tiles */
.sx-four { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:1.2rem; }
.sx-idea { padding:.65rem .8rem; border:1px solid #2c2c2c; border-radius:10px 10px 10px 3px; background:#151515; font-size:.82rem; line-height:1.45; color:var(--text); }
.sx-matches { display:grid; gap:.35rem; margin:.65rem 0 0; padding:0; list-style:none; font-size:.74rem; }
.sx-matches li { display:grid; grid-template-columns:4.6rem minmax(0,1fr) 2.4rem; gap:.5rem; align-items:center; color:var(--text-muted); }
.sx-matches li:first-child { color:var(--text); }
.sx-matches em { font-style:normal; text-align:right; font-variant-numeric:tabular-nums; }
.sx-meter { display:block; height:5px; border-radius:3px; background:#222; overflow:hidden; }
.sx-meter i { display:block; height:100%; width:var(--v); border-radius:3px; background:var(--sx-green); transform-origin:left; }
.sx-cats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; margin:0; padding:0; list-style:none; }
.sx-cats li { display:flex; align-items:center; gap:.4rem; padding:.3rem .5rem; border-radius:6px; background:#151515; font-size:.7rem; font-weight:600; color:var(--text-muted); white-space:nowrap; overflow:hidden; }
.sx-cats li::before { content:""; flex:none; width:7px; height:7px; border-radius:2px; background:var(--c); }
.sx-qa__q { margin-left:auto; width:fit-content; max-width:90%; padding:.4rem .65rem; border-radius:10px 10px 3px 10px; background:var(--primary-dark); color:#fff; font-size:.75rem; font-weight:500; }
.sx-qa__a { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:.6rem; }
.sx-qa__a .sx-line { flex:1 0 70%; margin:0; }
.sx-qa__a .sx-line.is-short { flex-basis:40%; }
.sx-qa__src { margin-top:.55rem; font-size:.66rem; color:var(--text-dim); }
.sx-orbit { display:block; width:100%; height:auto; }
.sx-orbit .ring { fill:none; stroke:#262626; stroke-dasharray:2 4; }
.sx-orbit .link { stroke:#3a3a3a; stroke-width:1.2; }
.sx-orbit .link.is-hot { stroke:var(--sx-green); stroke-width:2; }
.sx-orbit .hub { fill:url(#sx-hub); }
.sx-orbit text { font:700 11px var(--font); fill:#fff; text-anchor:middle; }
.sx-orbit .chip { fill:#151515; stroke:#2c2c2c; }
.sx-orbit .chip.is-hot { stroke:var(--sx-green); }
.sx-orbit .pct { fill:#23b35a; font-size:10px; }

/* 2 · matrix */
.sx-matrix { display:grid; grid-template-columns:minmax(0,1.05fr) repeat(3,minmax(0,1fr)); gap:.45rem; margin-top:1.2rem; }
.sx-matrix__h { padding:.5rem .6rem; border-radius:8px; background:#161616; font-size:.76rem; font-weight:700; }
.sx-matrix__h small { display:block; margin-top:.15rem; font-size:.62rem; font-weight:500; color:var(--text-dim); }
.sx-matrix__corner { align-self:end; font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); padding:.5rem 0; }
.sx-matrix__q { display:flex; gap:.4rem; align-items:flex-start; padding:.45rem .2rem; font-size:.72rem; line-height:1.35; color:var(--text); }
.sx-matrix__q b { color:#23b35a; font-size:.68rem; }
.sx-matrix__q span { min-width:0; hyphens:auto; overflow-wrap:break-word; }
.sx-cell { display:flex; flex-direction:column; justify-content:space-between; gap:.4rem; min-height:58px; padding:.5rem .55rem; border:1px solid #1f1f1f; border-radius:8px; background:var(--sx-tile); }
.sx-cell .sx-line { height:4px; }
.sx-cell .sx-line + .sx-line { margin-top:4px; }
.sx-cell__cites { display:flex; gap:3px; }
.sx-cell__cites i { width:5px; height:5px; border-radius:50%; background:#23b35a; opacity:.8; }
.sx-cell.is-hot { border-color:rgba(28,135,67,.75); box-shadow:0 0 0 1px rgba(28,135,67,.3),0 0 22px var(--primary-glow); }
.sx-cell.is-hot .sx-line.is-mark { background:rgba(35,179,90,.6); }
.sx-count { display:inline-flex; align-items:baseline; gap:.45rem; }
.sx-count b { position:relative; display:inline-block; min-width:5.6rem; font-size:1rem; color:#23b35a; font-variant-numeric:tabular-nums; }
.sx-count b span { transition:opacity .5s var(--ease),transform .5s var(--ease); display:inline-block; }
.sx-count b span + span { position:absolute; left:0; opacity:0; transform:translateY(8px); }
.sx-count.is-unlimited b span:first-child { opacity:0; transform:translateY(-8px); }
.sx-count.is-unlimited b span + span { opacity:1; transform:none; }
.sx-cell.is-hot { position:relative; }
.sx-cell.is-hot::after { content:""; position:absolute; left:50%; top:100%; width:2px; height:1.1rem; background:var(--sx-green); }
.sx-source { grid-column:3/5; margin-top:.65rem; padding:.7rem .8rem .8rem; border-radius:10px; background:var(--surface); color:#111; box-shadow:0 20px 50px rgba(0,0,0,.5); }
.sx-matrix__more { grid-column:1/3; align-self:center; display:grid; gap:.35rem; margin-top:.65rem; font-size:.75rem; color:var(--text-muted); }
.sx-source__meta { font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#555; }
.sx-source__title { margin-top:.2rem; font-size:.78rem; font-weight:700; }
.sx-source__page { margin-top:.5rem; padding:.55rem .6rem; border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px #ddd; }
.sx-source__page i { display:block; height:5px; border-radius:3px; background:#e0e0e0; }
.sx-source__page i + i { margin-top:5px; }
.sx-source__page i.is-cited { background:rgba(35,179,90,.6); }

/* 3 · portfolio globe */
.sx-globe { position:relative; aspect-ratio:1/.9; }
.sx-globe canvas { position:absolute; inset:0; width:100%; height:100%; }
.sx-globe__fallback { position:absolute; inset:10%; display:flex; align-items:center; justify-content:center; padding:2rem; border:1px solid #1f2b24; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(35,179,90,.10),rgba(35,179,90,.02)); color:var(--text-dim); font-size:.85rem; text-align:center; }
.sx-js .sx-globe__fallback { display:none; }
.sx-globe__caption { position:absolute; left:0; right:0; top:1.6rem; min-height:3rem; }
.sx-globe__caption p { position:absolute; left:0; top:0; display:flex; gap:.55rem; align-items:center; max-width:100%; padding:.55rem .8rem; border:1px solid #2a2a2a; border-radius:10px; background:rgba(10,10,10,.85); font-size:.8rem; line-height:1.4; color:var(--text); opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease),transform .5s var(--ease); }
.sx-globe__caption p b { display:inline-flex; align-items:center; justify-content:center; flex:none; width:20px; height:20px; border-radius:50%; background:var(--primary); color:#fff; font-size:.68rem; }
.sx-globe__caption p:nth-child(2) b { background:#f2a65a; color:#111; }
.sx-globe__caption p.is-on { opacity:1; transform:none; }
.sx-globe__score { position:absolute; right:0; bottom:.4rem; padding:.55rem .8rem; border:1px solid #2a2a2a; border-radius:10px; background:rgba(10,10,10,.85); text-align:right; }
.sx-globe__score small { display:block; font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.sx-globe__score strong { font-size:1.35rem; font-variant-numeric:tabular-nums; }
.sx-globe__score span { font-size:.75rem; color:var(--text-dim); }
.sx-legend { display:flex; flex-wrap:wrap; gap:.35rem 1rem; margin:.4rem 0 0; padding:0; list-style:none; font-size:.72rem; color:var(--text-dim); }
.sx-legend li { display:inline-flex; align-items:center; gap:.4rem; }
.sx-legend i { width:9px; height:9px; border-radius:50%; background:var(--c); }
.sx-legend i.is-dot { width:4px; height:4px; border-radius:1px; }

/* ---------- start anywhere ---------- */
.sx-anywhere { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.sx-ring { position:relative; width:100%; max-width:360px; aspect-ratio:1; margin:0 auto; }
.sx-ring > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sx-ring__glow { fill:rgba(28,135,67,.06); stroke:rgba(255,255,255,.05); }
.sx-ring__arc { fill:none; stroke:var(--primary); stroke-width:3; stroke-linecap:round; }
.sx-ring__comet { fill:#7dffaa; filter:drop-shadow(0 0 6px #23b35a); }
.sx-ring__node { position:absolute; display:flex; flex-direction:column; align-items:center; gap:.3rem; width:8.5rem; padding:.55rem .5rem; border:1px solid rgba(28,135,67,.5); border-radius:var(--radius-sm); background:var(--bg-card); text-align:center; transform:translate(-50%,-50%); box-shadow:0 0 30px var(--primary-glow); font-size:.78rem; font-weight:700; line-height:1.25; }
.sx-ring__node .sx-icon { width:28px; height:auto; color:var(--primary); }
.sx-ring__node b { color:#23b35a; }
.sx-ring__node--1 { left:50%; top:12.5%; }
.sx-ring__node--2 { left:82.5%; top:68.75%; }
.sx-ring__node--3 { left:17.5%; top:68.75%; }
.sx-entries { display:grid; gap:.6rem; margin:1.4rem 0 0; padding:0; list-style:none; }
.sx-entries a { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.15rem .9rem; align-items:center; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-card); color:var(--text); transition:all .3s var(--ease); }
.sx-entries a:hover { border-color:rgba(28,135,67,.4); color:var(--text); transform:translateX(4px); }
.sx-entries b { grid-row:span 2; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--primary); color:#fff; font-size:.85rem; }
.sx-entries strong { font-size:.95rem; }
.sx-entries span { font-size:.85rem; color:var(--text-muted); }

/* ---------- end ---------- */
.sx-end { text-align:center; }
.sx-end .section-subtitle { margin-bottom:1.75rem; }
.sx-end .btn--primary { padding:.9rem 2.5rem; font-size:1rem; }

/* ---------- motion: the site's fade-up, plus illustration build-ups (JavaScript only) ---------- */
.sx-js .sx-reveal { opacity:0; transform:translateY(50px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.sx-js .sx-reveal.animate-in { opacity:1; transform:none; }
.sx-js .sx-stagger > * { opacity:0; transform:translateY(30px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.sx-js .sx-stagger.animate-in > * { opacity:1; transform:none; }
.sx-js .sx-stagger.animate-in > :nth-child(2) { transition-delay:.12s; }
.sx-js .sx-stagger.animate-in > :nth-child(3) { transition-delay:.24s; }
.sx-js .sx-stagger.animate-in > :nth-child(4) { transition-delay:.36s; }
.sx-js .sx-figure .sx-meter i { transform:scaleX(0); transition:transform .9s var(--ease) .4s; }
.sx-js .sx-figure.animate-in .sx-meter i { transform:none; }
.sx-js .sx-figure .sx-cell { opacity:.15; transition:opacity .5s var(--ease); }
.sx-js .sx-figure.animate-in .sx-cell { opacity:1; transition-delay:calc(.3s + var(--i) * .07s); }
.sx-js .sx-figure .sx-source { opacity:0; transform:translateY(16px) scale(.96); transition:opacity .6s var(--ease) 1.4s,transform .6s var(--ease) 1.4s; }
.sx-js .sx-figure .sx-cell.is-hot::after { transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease) 1.1s; }
.sx-js .sx-figure.animate-in .sx-cell.is-hot::after { transform:none; }
.sx-js .sx-figure.animate-in .sx-source { opacity:1; transform:none; }
.sx-js .sx-figure .sx-orbit .chip-g { opacity:0; transition:opacity .5s var(--ease); }
.sx-js .sx-figure.animate-in .sx-orbit .chip-g { opacity:1; transition-delay:calc(.6s + var(--i) * .12s); }

/* ---------- responsive ---------- */
@media (max-width:960px) {
 .sx-split,.sx-anywhere { grid-template-columns:minmax(0,1fr); }
 .sx-split--flip > .sx-copy { order:0; }
 .sx-steps { grid-template-columns:minmax(0,1fr); gap:.75rem; }
 .sx-ring { max-width:300px; }
}
@media (max-width:600px) {
 .sx-four { grid-template-columns:minmax(0,1fr); }
 .sx-matrix { grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,.8fr)); gap:.3rem; }
 .sx-matrix__q { font-size:.66rem; }
 .sx-matrix__h { padding:.4rem; font-size:.66rem; }
 .sx-matrix__h small { display:none; }
 .sx-cell { min-height:46px; padding:.4rem; }
 .sx-source { grid-column:2/5; }
 .sx-matrix__more { grid-column:1/-1; order:2; }
 .sx-ring__node { width:7rem; font-size:.7rem; }
 .sx-ring__node .sx-icon { display:none; }
}
@media (max-width:480px) {
 .sx-film__play { left:50%; bottom:50%; padding:0; border:0; background:none; backdrop-filter:none; transform:translate(-50%,50%); }
 .sx-film__play:hover { transform:translate(-50%,50%); box-shadow:none; }
 .sx-film__label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
 .sx-film__icon { width:56px; height:56px; }
 .sx-proof > span { flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) {
 .sx-page *,.sx-page *::before,.sx-page *::after { animation:none!important; transition:none!important; }
 .sx-js .sx-reveal,.sx-js .sx-stagger > * { opacity:1; transform:none; }
 .sx-ring__comet { display:none; }
}