/* Home extras (SA Coder): comparison table .cmp- and technologies grid .tch- */
.cmp,.tch{position:relative;isolation:isolate;overflow:hidden}
.cmp{background:var(--bg)}
.cmp__glow,.tch__glow{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cmp__glow span,.tch__glow span{position:absolute;border-radius:50%;filter:blur(90px)}
.cmp__glow span:first-child{width:520px;height:520px;right:-160px;top:-120px;background:radial-gradient(circle,rgba(229,37,42,.28),transparent 70%)}
.cmp__glow span:last-child{width:420px;height:420px;left:-120px;bottom:-160px;background:radial-gradient(circle,rgba(255,122,89,.28),transparent 70%)}
.cmp__head,.tch__head{max-width:760px;margin:0 auto clamp(36px,5vw,64px);text-align:center}
.cmp__head h2,.tch__head h2{font-family:var(--f-head);font-size:clamp(2.1rem,4.4vw,3.8rem);line-height:1.02;letter-spacing:-.03em;margin:0}
.cmp__head h2 em,.tch__head h2 em{font-style:normal;color:var(--accent)}
.cmp__head>p:last-child,.tch__head>p:last-child{margin:20px auto 0;max-width:52ch;color:var(--ink-soft);line-height:1.7}
.cmp__kicker{display:inline-flex;align-items:center;gap:10px;font:600 11px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 18px}
.cmp__kicker:before,.cmp__kicker:after{content:"";width:24px;height:2px;background:var(--accent)}
.cmp__kicker--light{color:var(--coral)}
.cmp__kicker--light:before,.cmp__kicker--light:after{background:var(--coral)}

/* ---- comparison table ---- */
.cmp__scroll{overflow-x:auto;border-radius:var(--r-lg);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(24px) saturate(165%);backdrop-filter:blur(24px) saturate(165%);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.75);scrollbar-width:thin}
.cmp__table{width:100%;min-width:780px;border-collapse:separate;border-spacing:0;text-align:left}
.cmp__table th,.cmp__table td{padding:20px 24px;font-size:15px;line-height:1.45;vertical-align:middle;border-bottom:1px solid var(--line)}
.cmp__table tbody tr:last-child th,.cmp__table tbody tr:last-child td{border-bottom:0}
.cmp__table thead th{font:600 11px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-block:24px;background:rgba(236,230,225,.55)}
.cmp__table tbody th{font-family:var(--f-head);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);width:24%}
.cmp__table td{color:var(--ink-soft);width:25.3%}
.cmp__table td>.ico{display:inline-block;vertical-align:-5px;margin-right:10px;width:20px;height:20px}
.cmp-y{color:var(--accent)}
.cmp-y--soft,.cmp-n,.cmp-w{color:var(--muted)}
.cmp__table .cmp__us{background:linear-gradient(180deg,rgba(229,37,42,.09),rgba(255,122,89,.07));color:var(--ink);font-weight:700;border-inline:1px solid rgba(229,37,42,.22)}
.cmp__table thead .cmp__us{background:var(--accent);color:#fff;border-color:var(--accent);letter-spacing:.14em}
.cmp__badge{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:10px;border-radius:8px;background:rgba(255,255,255,.22);font:700 10px/1 var(--f-mono);letter-spacing:0;vertical-align:middle}
.cmp__table tbody tr:last-child .cmp__us{border-bottom:1px solid rgba(229,37,42,.22)}
.cmp__table tbody tr{transition:background .3s}
@media (hover:hover){.cmp__table tbody tr:hover th,.cmp__table tbody tr:hover td:not(.cmp__us){background:rgba(255,255,255,.55)}}
.cmp__note{margin-top:22px;text-align:center;font:600 12px/1.6 var(--f-mono);letter-spacing:.06em;color:var(--muted)}

/* ---- technologies ---- */
.tch{background:var(--dark);color:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0}
.tch__glow span:first-child{width:560px;height:560px;left:-140px;top:-160px;background:radial-gradient(circle,rgba(229,37,42,.45),transparent 70%)}
.tch__glow span:last-child{width:460px;height:460px;right:-120px;bottom:-200px;background:radial-gradient(circle,rgba(255,122,89,.28),transparent 70%)}
.tch__head h2{color:#fff}
.tch__head h2 em{color:var(--coral)}
.tch__head>p:last-child{color:rgba(255,255,255,.72)}
.tch__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:clamp(28px,4vw,48px)}
.tch__tab{padding:13px 24px;border-radius:var(--pill);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.78);font:600 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s,transform .3s}
@media (hover:hover){.tch__tab:hover{border-color:rgba(255,255,255,.5);color:#fff;transform:translateY(-2px)}}
.tch__tab.is-on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 14px 30px -12px rgba(229,37,42,.8)}
.tch__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.tch__item{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;padding:20px 22px;border-radius:var(--r-md);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s;will-change:transform}
@media (hover:hover){.tch__item:hover{transform:translateY(-6px);border-color:rgba(255,122,89,.55);background:rgba(255,255,255,.11)}}
.tch__item[hidden]{display:none}
.tch__mono{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--coral),var(--accent));font:700 15px/1 var(--f-head);letter-spacing:-.02em;color:#fff;box-shadow:0 10px 22px -10px rgba(229,37,42,.8)}
.tch__item[data-c="ai"] .tch__mono,.tch__item[data-c="pay"] .tch__mono{background:linear-gradient(135deg,var(--accent),var(--accent-deep))}
.tch__item[data-c="code"] .tch__mono{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);box-shadow:none;color:var(--coral)}
.tch__item b{font:700 1.1rem/1.2 var(--f-head);letter-spacing:-.02em;align-self:end}
.tch__item small{font:600 10px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);align-self:start}

@media(max-width:700px){
 .cmp__table th,.cmp__table td{padding:16px 18px}
 .tch__grid{grid-template-columns:repeat(2,1fr);gap:12px}
 .tch__item{grid-template-columns:1fr;row-gap:6px;padding:18px}
 .tch__mono{grid-row:auto}
}
@media(max-width:380px){.tch__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.tch__item,.tch__tab,.cmp__table tbody tr{transition:none}}

/* all technologies: compact tiles and category tints */
.tch__item[data-c="analytics"] .tch__mono{background:linear-gradient(135deg,var(--accent),var(--accent-deep))}
.tch__item[data-c="db"] .tch__mono,.tch__item[data-c="cloud"] .tch__mono,.tch__item[data-c="devops"] .tch__mono,.tch__item[data-c="mobile"] .tch__mono,.tch__item[data-c="auto"] .tch__mono{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);box-shadow:none;color:var(--coral)}
.tch__tabs{max-width:980px;margin-inline:auto}
.tch__tab{padding:11px 20px}
@media(min-width:701px){
 .tch__grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px}
 .tch__item{padding:15px 16px;column-gap:13px}
 .tch__mono{width:42px;height:42px;border-radius:12px;font-size:14px}
 .tch__item b{font-size:1rem}
}

/* logos: small pill tiles */
.tch__grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.tch__item{display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:var(--pill);column-gap:11px}
@media (hover:hover){.tch__item:hover{transform:translateY(-3px)}}
.tch__item b{font:700 .92rem/1.2 var(--f-head);letter-spacing:-.01em;align-self:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tch__logo{flex:none;width:22px;height:22px;background:rgba(255,255,255,.92);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:background .3s}
@media (hover:hover){.tch__item:hover .tch__logo{background:var(--coral)}}
.tch__grid .tch__item .tch__mono{grid-row:auto;width:24px;height:24px;border-radius:8px;font:700 10px/1 var(--f-head);letter-spacing:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);box-shadow:none;color:var(--coral)}
@media(max-width:700px){.tch__grid{grid-template-columns:repeat(2,1fr);gap:8px}.tch__item{padding:10px 14px;gap:10px}}
@media(max-width:380px){.tch__grid{grid-template-columns:1fr}}