/* Страница «Возможности» (features.html). */

.f-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.f-hero .kicker { align-self: center; }
.f-h1 { margin: 0; font-weight: 800; font-size: clamp(44px, 6vw, 80px); line-height: 1.02; letter-spacing: -0.04em; max-width: 14ch; }
.f-hero .lead { max-width: 52ch; }
.f-hero .btn-row { justify-content: center; }

.f-stats { margin-top: 40px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 32px; background: #F5F5F7; }
.f-stat { padding: 32px 24px; display: flex; flex-direction: column; gap: 6px; }
.f-stat.is-mid { box-shadow: inset 1px 0 0 #E2E2E6, inset -1px 0 0 #E2E2E6; }
.f-stat-num { font-family: 'Manrope', sans-serif; font-size: 48px; font-weight: 800; letter-spacing: -0.03em; color: #0500FF; }
.f-stat-label { font-size: 16px; color: #616161; }

.f-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.f-card { border-radius: 32px; background: #F5F5F7; padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.f-card.is-tall { min-height: 340px; }
.f-card-h3 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.f-card-p { margin: 0; font-size: 15px; line-height: 1.55; color: #616161; }
.f-card-foot { margin-top: auto; }

/* Обмен */
.f-swap { grid-column: span 2; border-radius: 32px; background: #0500FF; color: #FFFFFF; padding: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; align-items: center; min-height: 320px; }
.f-swap-text { display: flex; flex-direction: column; gap: 14px; }
.f-swap-h3 { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.f-swap-p { margin: 0; font-size: 16px; line-height: 1.55; color: #FFFFFF; }
.f-swap-box { position: relative; display: flex; flex-direction: column; gap: 8px; }
.f-swap-row { border-radius: 20px; background: #FFFFFF; color: #1B1B1C; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.f-swap-amount { display: flex; flex-direction: column; gap: 4px; }
.f-swap-label { font-size: 12px; color: #616161; }
.f-swap-value { font-size: 26px; font-weight: 700; white-space: nowrap; }
.f-coin { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: 999px; background: #F5F5F7; font-size: 15px; font-weight: 700; }
.f-coin-dot { width: 26px; height: 26px; border-radius: 50%; }
.f-coin-dot.eth { background: #627EEA; }
.f-coin-dot.usdt { background: #26A17B; }
.f-swap-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #48FF91; border: 4px solid #0500FF; display: flex; align-items: center; justify-content: center; }

/* Покупка */
.f-pays { display: flex; flex-wrap: wrap; gap: 8px; }
.f-pay { height: 34px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px #E2E2E6; font-size: 13px; font-weight: 700; display: flex; align-items: center; }

/* Доход */
.f-bars { height: 90px; display: flex; align-items: flex-end; gap: 8px; }
.f-bar { flex: 1; border-radius: 8px; }
.f-bar:nth-child(1) { height: 26%; background: #DCDCFF; }
.f-bar:nth-child(2) { height: 38%; background: #DCDCFF; }
.f-bar:nth-child(3) { height: 48%; background: #B9B7FF; }
.f-bar:nth-child(4) { height: 62%; background: #B9B7FF; }
.f-bar:nth-child(5) { height: 78%; background: #6A66FF; }
.f-bar:nth-child(6) { height: 100%; background: #0500FF; }

/* NFT */
.f-nfts { position: relative; height: 96px; }
.f-nft { position: absolute; width: 84px; height: 84px; border-radius: 20px; }
.f-nft:nth-child(1) { left: 0; bottom: 0; background: #48FF91; transform: rotate(-8deg); }
.f-nft:nth-child(2) { left: 60px; bottom: 6px; background: #0500FF; box-shadow: 0 0 0 4px #F5F5F7; }
.f-nft:nth-child(3) { left: 120px; bottom: 0; background: #FFB800; transform: rotate(8deg); box-shadow: 0 0 0 4px #F5F5F7; }

/* Web3 */
.f-browser { border-radius: 18px; background: #FFFFFF; box-shadow: 0 0 0 1px #E2E2E6; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.f-url { height: 34px; border-radius: 999px; background: #F5F5F7; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; color: #616161; }
.f-dapps { display: flex; gap: 8px; }
.f-dapp { width: 40px; height: 40px; border-radius: 12px; }
.f-dapp:nth-child(1) { background: #FF007A; }
.f-dapp:nth-child(2) { background: #1FC7D4; }
.f-dapp:nth-child(3) { background: #2081E2; }
.f-dapp:nth-child(4) { background: #9945FF; }

/* Безопасность */
.f-sec { grid-column: span 3; border-radius: 32px; background: #1B1B1C; color: #FFFFFF; padding: 40px; display: flex; flex-direction: column; gap: 32px; }
.f-sec-head { display: flex; flex-direction: column; gap: 14px; }
.f-sec-icon { width: 56px; height: 56px; border-radius: 18px; background: #48FF91; display: flex; align-items: center; justify-content: center; }
.f-sec-h3 { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #FFFFFF; }
.f-sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.f-sec-item { border-radius: 22px; background: #2A2A2C; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.f-sec-t { font-size: 17px; font-weight: 700; }
.f-sec-d { font-size: 14px; line-height: 1.55; color: #C9C9CF; }

@media (max-width: 768px) {
  .f-stats { grid-template-columns: minmax(0, 1fr); }
  .f-grid { grid-template-columns: minmax(0, 1fr); }
  .f-swap { grid-column: auto; padding: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .f-sec { grid-column: auto; padding: 28px; gap: 24px; }
  .f-sec-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
}