/* ── Page Content ── */
.page-content { padding-top: 100px; padding-bottom: 80px; min-height: 100vh; }

.page-hero {
  text-align: center; margin-bottom: 64px;
}
.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 700;
  color: var(--white); margin-bottom: 12px;
}
.page-hero p { color: var(--text-dim); font-size: 1.1rem; max-width: 520px; margin: 0 auto; }

/* ── Feature Detail Blocks ── */
.feature-detail {
  margin-bottom: 32px; background: var(--dark-2);
  border: 1px solid var(--dark-4); border-radius: var(--radius);
  overflow: hidden; transition: border-color 0.3s;
}
.feature-detail:hover { border-color: rgba(0, 212, 255, 0.2); }

.feature-detail-header {
  display: flex; align-items: center; gap: 20px;
  padding: 32px 36px; border-bottom: 1px solid var(--dark-4);
}

.feature-detail-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
}
.feature-detail-icon.cyan { background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.15); color: var(--cyan); }
.feature-detail-icon svg { width: 26px; height: 26px; }

.feature-detail-header h2 { font-size: 1.3rem; color: var(--white); margin-bottom: 2px; }
.feature-detail-sub { font-size: 0.92rem; color: var(--text-dim); }

.feature-detail-body { padding: 32px 36px; }
.feature-detail-body > p { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 24px; line-height: 1.8; }

.feature-detail-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.detail-item {
  padding: 20px; background: var(--dark-3); border-radius: var(--radius-sm);
  border: 1px solid var(--dark-4); font-size: 0.88rem; color: var(--text-dim); line-height: 1.6;
}
.detail-item strong { color: var(--white); display: block; margin-bottom: 4px; }

/* ── About Section ── */
.about-section { max-width: 700px; margin: 0 auto 64px; }
.about-block { margin-bottom: 40px; }
.about-block h2 { font-size: 1.4rem; color: var(--white); margin-bottom: 12px; }
.about-block p { color: var(--text-dim); font-size: 1rem; line-height: 1.8; }

.values-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; margin-bottom: 64px;
}

.value-card {
  padding: 32px 28px;
  background: var(--dark-2); border: 1px solid var(--dark-4); border-radius: var(--radius);
  transition: border-color 0.3s;
}
.value-card:hover { border-color: rgba(0, 212, 255, 0.2); }
.value-num { font-size: 2rem; font-weight: 800; color: rgba(0, 212, 255, 0.15); line-height: 1; margin-bottom: 12px; }
.value-card h3 { font-size: 1.1rem; color: var(--white); margin-bottom: 8px; }
.value-card p { color: var(--text-dim); font-size: 0.92rem; }

/* ── Contact Page ── */
.contact-layout {
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px;
  align-items: start;
}

.contact-form { display: flex; flex-direction: column; gap: 16px; }

.contact-sidebar { display: flex; flex-direction: column; gap: 16px; }

.contact-info-card {
  display: flex; gap: 16px; align-items: center;
  padding: 20px; background: var(--dark-2);
  border: 1px solid var(--dark-4); border-radius: var(--radius-sm);
}
.contact-info-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 212, 255, 0.08); border-radius: 10px; color: var(--cyan);
}
.contact-info-icon svg { width: 20px; height: 20px; }
.contact-info-card h4 { font-size: 0.85rem; color: var(--white); margin-bottom: 2px; }
.contact-info-card p { font-size: 0.88rem; color: var(--text-dim); }

/* ── CTA Block ── */
.cta-block {
  text-align: center; padding: 64px 32px;
  background: var(--dark-2); border: 1px solid var(--dark-4);
  border-radius: var(--radius); margin-top: 48px;
}
.cta-block h2 { font-size: 1.6rem; color: var(--white); margin-bottom: 8px; }
.cta-block p { color: var(--text-dim); margin-bottom: 24px; }

/* ── Mobile ── */
@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr; }
  .feature-detail-header { flex-direction: column; align-items: flex-start; padding: 24px; }
  .feature-detail-body { padding: 24px; }
}