/* ============================================================================
   Sema PTA landing — 05 — «Как это работает» (3-step how-grid)
   ----------------------------------------------------------------------------
   To edit this section, open css/how.css. All rules are grouped here.
   ============================================================================ */

/* ============ How it works (3 steps) ============ */

.how-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  }

.how-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,138,76,0.03), rgba(255,138,76,0));
    border: 1px solid var(--border);
    border-radius: 20px; padding: 32px 28px 28px;
    overflow: hidden;
    transition: border-color .3s, transform .3s;
  }

.how-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }

.how-num {
    font-family: var(--font-mono); font-size: 12px; color: var(--sema-500);
    letter-spacing: .2em; margin-bottom: 24px;
  }

.how-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, var(--sema-500), var(--sema-700));
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 12px 30px rgba(255,138,76,0.25);
  }

.how-icon svg { width: 26px; height: 26px; stroke: #0E0B08; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.how-card h3 {
    font-size: 22px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em;
  }

.how-card p { color: var(--text-dim); font-size: 15px; line-height: 1.6; }

.how-arrow {
    position: absolute; top: 40px; right: -32px; width: 56px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--sema-500), transparent);
    opacity: 0.4;
  }

.how-card:last-child .how-arrow { display: none; }