/* pages/trading.css */
@import url('shared.css');

.page-hero-bg { background-image: url('https://kemiteglobalgroup.com/images/trading/tcentral.jpg'); }

.catalog-section { padding: 90px 20px; }
.catalog-section:nth-child(odd) { background: var(--dark); }
.catalog-section:nth-child(even) { background: var(--dark-3); }

.catalog-section-header { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.catalog-section-header .section-label { margin-bottom: 0; }
.catalog-divider { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201,168,76,.4), transparent); }

.advantage-card { background: var(--dark-card); border: 1px solid rgba(201,168,76,.12); padding: 30px 24px; display: flex; gap: 18px; align-items: flex-start; transition: border-color .3s, transform .3s; }
.advantage-card:hover { border-color: rgba(201,168,76,.45); transform: translateY(-3px); }
.adv-icon { width: 44px; height: 44px; background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.3); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; }
.adv-icon .material-icons { font-size: 20px; }
.adv-title { font-family: 'Cormorant Garamond',serif; font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.adv-text { font-size: .8rem; color: var(--text-muted); line-height: 1.75; }

.values-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.value-tag { border: 1px solid rgba(201,168,76,.35); color: var(--gold); font-family: 'Rajdhani',sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 6px 14px; }

/* 992px */
@media (max-width: 992px) {
  .page-hero { height: 280px; }
  .catalog-section { padding: 70px 20px; }
}

/* 768px */
@media (max-width: 768px) {
  .page-hero { height: 240px; }
  .catalog-section { padding: 60px 16px; }
  .catalog-section-header { flex-wrap: wrap; gap: 8px; }
  .catalog-divider { display: none; }
  .advantage-card { padding: 22px 18px; gap: 14px; }
}

/* 480px */
@media (max-width: 480px) {
  .page-hero { height: 210px; }
  .catalog-section { padding: 48px 14px; }
  .advantage-card { flex-direction: column; gap: 12px; padding: 18px 14px; }
  .adv-icon { width: 38px; height: 38px; }
  .value-tag { font-size: .66rem; padding: 5px 10px; }
}