/* ===== Landing page — mirrors the standalone design's <style> block =====
   Base appearance for each element is set inline in home.html; these classes
   carry the base text color, keyframes, interactive states, and the
   responsive breakpoints (900px tablet, 600px mobile). */

.rc-landing { color: #000080; }
/* Only reset the underline — NOT the color: every landing link sets its own
   color via a btn-* class or inline style, and adding `color: inherit` here
   would out-specify `.btn-primary { color:#fff }` and hide button labels. */
.rc-landing a { text-decoration: none; }

/* Neutralize the site-wide dark theme (design-tokens.css) inside the landing.
   That theme targets bare elements (h1-h6 -> Manrope; input[type=...] -> dark
   fill) with enough specificity to beat plain classes, so scope the overrides
   under .rc-landing to win. */
.rc-landing h1, .rc-landing h2, .rc-landing h3,
.rc-landing h4, .rc-landing h5, .rc-landing h6 { font-family: 'Hanken Grotesk', sans-serif; }

@keyframes r-spin { to { transform: rotate(360deg); } }
@keyframes r-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ind-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Solutions tabs + panels */
.tab-btn { padding: 11px 20px; border-radius: 10px; font-size: 15px; font-weight: 600; transition: .15s; border: 1px solid #DCE4EC; background: #fff; color: #52627A; }
.tab-btn.active { background: #000080; color: #fff; border-color: transparent; }
.sol-card { display: none; }
.sol-card.active { display: grid; }

/* Contact form fields (scoped to out-specify the dark theme's input rules) */
.rc-landing .field { width: 100%; padding: 12px 14px; min-height: 0; border: 1px solid #CBD6E2; border-radius: 10px; background: #fff; font-size: 15px; color: #000080; outline: none; transition: .15s; }
.rc-landing .field:focus { background: #fff; color: #000080; border-color: #000080; box-shadow: 0 0 0 3px rgba(0,0,128,0.1); }
.rc-landing .field::placeholder { color: #8B99AB; }
.err { display: block; margin-top: 6px; font-size: 13px; color: #B4472E; }

/* Industries marquee (two identical halves -> -50% keyframe) */
.marquee-track { display: flex; width: max-content; gap: 14px; animation: ind-marquee 36s linear infinite; }
.marquee-mask:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .wrap { padding-left: 24px !important; padding-right: 24px !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .sol-card.active { grid-template-columns: 1fr !important; gap: 32px !important; }
  .etp-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .proc-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  h1.hero-title { font-size: 46px !important; }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .sec-pad { padding-top: 60px !important; padding-bottom: 60px !important; }
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .hero-top { padding-top: 52px !important; }
  h1.hero-title { font-size: 34px !important; }
  .hero-cta { flex-wrap: wrap !important; }
  .hero-cta > a { flex: 1 1 auto !important; text-align: center !important; }
  .stat-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .stat-grid > div { display: flex !important; align-items: baseline !important; gap: 14px !important; padding-top: 14px !important; }
  .stat-grid > div > div:last-child { margin-top: 0 !important; }
  .sol-card.active { padding: 26px !important; }
  .etp-cards { grid-template-columns: 1fr !important; }
  .proc-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .about-grid { grid-template-columns: 1fr !important; }
  .np-grid { grid-template-columns: 1fr !important; }
  .contact-card { padding: 26px !important; }
  h2.sec-title { font-size: 32px !important; }
}