/* ===========================================================================
   Enterprise foundation — a dark technical slab.
   Four independent matrices — Perception × Memory × Orchestration × Platform —
   read left to right as one equation. Each matrix is its own bracketed
   column: a strong purple rule, a small consistent node icon, then the
   capability itself, closed with a dotted "and more" row (top 3/4 only,
   not the whole list). Behind it all, a very faint neural network with
   activation travelling left to right (stack.js) — unchanged, the client
   liked it. Every selector is namespaced .st-* and lives under .stack.
   =========================================================================== */

.stack{
 --st-ground:#1c1924;
 --st-ink:#f4f0fb;
 --st-ink-dim:#b3a6c6;
 --st-muted:#8d81a1;
 --st-line:#ffffff1f;
 --st-purple:#a983f4;
 --st-ease:cubic-bezier(.16,1,.3,1);

 position:relative;
 z-index:2;
 isolation:isolate;
 overflow:hidden;
 padding:clamp(76px,9vw,128px) 5vw clamp(84px,10vw,136px);
 background:
   radial-gradient(120% 90% at 12% -10%,#2f2145 0%,transparent 62%),
   radial-gradient(90% 80% at 100% 110%,#291a3d 0%,transparent 58%),
   var(--st-ground);
 color:var(--st-ink);
}

/* the icon sprite carries no box of its own */
.st-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* the neural canvas sits behind everything and never takes a click */
.st-canvas{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 display:block;
 pointer-events:none;
 z-index:0;
}

.st-inner{
 position:relative;
 z-index:1;
 width:100%;
 max-width:1240px;
 margin:0 auto;
}

/* ---------- head ---------- */

.st-head{position:relative;max-width:680px}

/* the glyph-local shadow keeps contrast even when a pulse passes underneath */
.st-eyebrow,.st-h,.st-sub{text-shadow:0 1px 16px #14111ccc}

.st-eyebrow{
 margin:0 0 18px;
 font-family:ui-monospace,Menlo,monospace;
 font-size:10px;
 letter-spacing:.18em;
 text-transform:uppercase;
 color:#a78ad6;
}

.st-h{
 margin:0;
 font-size:clamp(32px,4.1vw,54px);
 font-weight:550;
 line-height:1.05;
 letter-spacing:-.045em;
 color:var(--st-ink);
}

.st-sub{
 margin:16px 0 0;
 font-size:clamp(14px,1.2vw,16px);
 line-height:1.6;
 color:var(--st-ink-dim);
}

/* ---------- the equation: matrix × matrix × matrix × matrix ---------- */

.st-eq-wrap{
 margin-top:clamp(44px,5vw,68px);
 overflow-x:auto;
 overflow-y:hidden;
 -webkit-overflow-scrolling:touch;
 /* room so the brackets and hover states never get clipped by the scroller */
 padding:4px 2px 14px;
}

.st-eq{
 display:flex;
 align-items:stretch;
 gap:clamp(10px,1.6vw,20px);
 width:max-content;
 min-width:100%;
}

.st-matrix{
 display:flex;
 flex-direction:column;
 flex:1 1 0;
 min-width:212px;
 max-width:330px;
 margin:0;
}

.st-matrix-head{
 margin:0 0 18px;
 text-align:center;
}

.st-matrix-title{
 display:block;
 font-size:clamp(20px,2.3vw,26px);
 font-weight:650;
 letter-spacing:-.02em;
 line-height:1.08;
 color:var(--st-ink);
}

/* the bracketed body of one matrix */
.st-matrix-frame{
 position:relative;
 flex:1;
 display:flex;
 align-items:stretch;
 padding:0 15px;
}

.st-bk{
 position:absolute;
 top:0;
 bottom:0;
 width:9px;
 border:1.5px solid #b98ffc85;
 border-radius:3px;
}
.st-bk-l{left:0;border-right:0;border-radius:5px 0 0 5px}
.st-bk-r{right:0;border-left:0;border-radius:0 5px 5px 0}

.st-rows{
 flex:1;
 list-style:none;
 margin:0;
 padding:2px 0;
 display:flex;
 flex-direction:column;
}

.st-row{
 display:grid;
 grid-template-columns:2px 20px 1fr;
 align-items:center;
 column-gap:13px;
 padding:14px 1px;
 border-radius:6px;
 transition:background .35s var(--st-ease);
}
.st-row + .st-row{border-top:1px solid var(--st-line)}

.st-row:hover{background:#ffffff09}

/* the strong internal column line the client asked for — this is the
   deliberate design feature, not a hairline */
.st-vline{
 align-self:stretch;
 width:2px;
 border-radius:1px;
 background:var(--st-purple);
 opacity:.6;
 transition:opacity .35s var(--st-ease);
}
.st-row:hover .st-vline{opacity:.9}

/* one consistent line-icon per capability, in the brand purple */
.st-ico{
 width:19px;
 height:19px;
 color:var(--st-purple);
 opacity:.9;
 flex:0 0 auto;
}

.st-val{
 font-size:clamp(15.5px,1.5vw,17.5px);
 font-weight:480;
 line-height:1.34;
 letter-spacing:-.012em;
 color:var(--st-ink);
 overflow-wrap:break-word;
}

/* the closing "and more" row — dotted rule, dimmer dot-mark, quieter label.
   Signals these are the top picks, not the whole list. */
.st-row-more{padding-top:12px;padding-bottom:4px}
.st-row-more:hover{background:transparent}

.st-vline-more{
 background:none;
 background-image:repeating-linear-gradient(to bottom,var(--st-purple) 0 3px,transparent 3px 7px);
 opacity:.5;
}

.st-ico-dots{
 width:19px;
 height:7px;
 color:var(--st-ink-dim);
 opacity:.8;
}

.st-more{
 font-size:13px;
 font-style:italic;
 letter-spacing:-.005em;
 color:var(--st-ink-dim);
}

/* the × column: a ghost header of the exact same height as a real matrix
   head, then a frame that centres the operator inside the leftover space —
   the same leftover space a matrix's bracket occupies, so the × lands on
   the matrices' true centre line regardless of header or row-count height. */
.st-op-col{
 display:flex;
 flex-direction:column;
 flex:0 0 auto;
}

.st-op-ghost{visibility:hidden}

.st-op-frame{
 flex:1;
 display:flex;
 align-items:center;
 justify-content:center;
}

.st-op{
 font-family:ui-monospace,Menlo,monospace;
 font-size:clamp(20px,2.2vw,26px);
 line-height:1;
 color:var(--st-purple);
 opacity:.8;
 user-select:none;
}

.st-tail{
 margin:clamp(26px,3.2vw,38px) 0 0;
 text-align:center;
 font-size:13.5px;
 color:var(--st-ink-dim);
}

/* ---------- phone: same left-to-right equation, its own scroll container ---------- */

@media(max-width:760px){
 .stack{padding:clamp(64px,12vw,86px) 5vw clamp(72px,13vw,96px)}
 .st-eq-wrap{margin-top:34px}
 .st-matrix{min-width:186px}
 .st-matrix-title{font-size:19px}
 .st-op{font-size:20px}
 .st-row{padding:11px 1px}
 .st-val{font-size:15px}
 .st-ico{width:17px;height:17px}
}

/* ---------- reduced motion ---------- */

@media(prefers-reduced-motion:reduce){
 .st-row,.st-vline{transition:none}
}