/* ══════════════════════════════════════
   ABOUT.CSS — About & Exchange page styles
══════════════════════════════════════ */

/* ─── ABOUT ─── */
.about-hero {
  padding: 36px 22px 28px; border-bottom: 1px solid var(--border); position: relative;
}
.about-hero::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--red); }
.ah-eye {
  font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--red); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px;
}
.ah-eye::before { content: ''; width: 16px; height: 2px; background: var(--red); }
.ah-title { font-size: 30px; font-weight: 900; color: var(--black); line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 10px; }
.ah-title em { font-style: italic; font-weight: 300; color: var(--blue); }
.ah-sub { font-size: 12px; color: var(--mid); line-height: 1.6; font-weight: 400; }

.stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 0 22px; margin-top: 16px; }
.stat { border: 1px solid var(--border); border-radius: 12px; padding: 16px 10px; text-align: center; background: var(--off); }
.stat-n { font-size: 24px; font-weight: 900; color: var(--blue); line-height: 1; }
.stat-l { font-size: 10px; color: var(--mid); margin-top: 4px; font-weight: 400; }

.info-block { margin: 10px 22px 0; background: var(--off); border: 1px solid var(--border); border-radius: 14px; padding: 20px 18px; }
.info-title {
  font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mid); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.info-title::before { content: ''; flex: none; width: 12px; height: 2px; background: var(--lime); }
.info-text { font-size: 12px; color: #555; line-height: 1.7; font-weight: 400; }

/* ─── EXCHANGE ─── */
.exch-hero { padding: 36px 22px 28px; border-bottom: 1px solid var(--border); position: relative; }
.exch-hero::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--blue); }
.eh-eye {
  font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--blue); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px;
}
.eh-eye::before { content: ''; width: 16px; height: 2px; background: var(--blue); }
.eh-title { font-size: 30px; font-weight: 900; color: var(--black); line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 10px; }
.eh-title em { font-style: italic; font-weight: 300; color: var(--blue); }
.eh-sub { font-size: 12px; color: var(--mid); line-height: 1.6; font-weight: 400; }

.dest { margin: 0 22px; margin-top: 10px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--white); cursor: pointer; transition: transform 0.15s; }
.dest:active { transform: scale(0.98); }
.dest-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); }
.dest-flag { font-size: 30px; }
.dest-country { font-size: 15px; font-weight: 900; color: var(--black); }
.dest-cities { font-size: 10px; color: var(--mid); margin-top: 2px; font-weight: 400; }
.dest-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.dest-body { padding: 14px 18px; font-size: 12px; color: #666; line-height: 1.6; font-weight: 400; }

.cta { margin: 16px 22px 0; background: var(--red); border-radius: 12px; padding: 16px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: transform 0.15s; text-decoration: none; }
.cta:active { transform: scale(0.98); }
.cta span { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--white); }