/* ===== NETWORKS PAGE ===== */
.net-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 470px; gap: 24px; align-items: start; }
@media (max-width: 920px) { .net-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } }
@media (max-width: 620px) { .net-grid { grid-template-columns: 1fr; grid-template-rows: auto; } }
.net-card { position: relative; overflow: hidden; transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.3s ease; background: rgba(255,255,255,0.03); border: 1px solid transparent; border-radius: 18px; padding: 18px; }
.net-card::before { content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.net-card.card-red::before { background: linear-gradient(135deg, rgba(232,18,46,0.6), rgba(255,255,255,0.06) 60%); }
.net-card.card-blue::before { background: linear-gradient(135deg, rgba(255,255,255,0.06) 40%, rgba(46,59,224,0.65)); }
.net-card:hover { transform: translateY(-2px); box-shadow: 0 0 20px rgba(255,255,255,0.1), 0 24px 60px rgba(0,0,0,0.4); background: rgba(255,255,255,0.06); }
.net-thumb { height: 132px; border-radius: 12px; overflow: hidden; transition: height 0.4s cubic-bezier(.16,.84,.32,1); }
.net-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.net-card:hover .net-thumb { height: 240px; }
.net-body { padding: 20px 6px 6px; }
.net-title { font-size: clamp(19px, 1.5vw, 23px); font-weight: 600; color: #ffffff; margin-bottom: 14px; }
.net-desc { font-size: 13.5px; font-weight: 400; line-height: 1.6; color: #c4c8d6; max-width: 420px; }
.net-reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(.16,.84,.32,1), opacity 0.35s ease, margin-top 0.4s ease; margin-top: 0; }
.net-card:hover .net-reveal { max-height: 90px; opacity: 1; margin-top: 22px; }
.see-all-btn { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #ffffff; font-size: 14px; font-weight: 500; transition: opacity 0.25s ease, transform 0.2s ease; }
.see-all-btn:hover { transform: translateX(3px); }
.see-all-icon { display: inline-flex; width: 38px; height: 38px; border-radius: 999px; background: #ffffff; align-items: center; justify-content: center; color: #0c0a18; font-size: 15px; }