/* ============================================================================
   Sema PTA landing — 06 — «Второй мозг» (features bento)
   ----------------------------------------------------------------------------
   To edit this section, open css/features.css. All rules are grouped here.
   ============================================================================ */

/* ============ Features grid (bento) ============ */

.features-bento {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
    grid-auto-rows: minmax(180px, auto);
  }

.feat {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 20px; padding: 28px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
    transition: border-color .3s, transform .3s;
  }

.feat:hover { border-color: var(--border-strong); }

.feat h4 { font-size: 20px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }

.feat p { color: var(--text-dim); font-size: 14px; line-height: 1.55; }

.feat .feat-icon { width: 40px; height: 40px; margin-bottom: 20px; color: var(--sema-500); }

.feat .feat-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.feat-wide { grid-column: span 4; }

.feat-md   { grid-column: span 3; }

.feat-sm   { grid-column: span 2; }

.feat-hero-visual {
    position: absolute; inset: auto -20px -30px auto; width: 220px; height: 220px; pointer-events: none;
    opacity: .6;
  }