/* ============================================================
   Atlas Carrier Group — Global Stylesheet
   ============================================================
   Forked from Template_Library/dark-tech-v1 (North Pointe AI's own
   V3.2 site, genericized). Direction: Flexe + RXO blend — minimalist
   tech-forward hero, bold typography, scale/technology/expertise
   positioning for a freight dispatch service.

   Brand tokens below are Atlas Carrier Group's real logo colors
   (deep navy + steel blue + chrome silver). Per file 04's
   one-accent-color principle, the template's original gold accent
   has been replaced with chrome silver rather than kept as a
   second competing hue — variable names unchanged, only values
   updated, per the template's own README instruction.

   Sections in this file, in order:
   1. Tokens (variables)
   2. Base/reset
   3. Nav (incl. mobile hamburger menu)
   4. Buttons
   5. Hero
   6. Light body sections (generic)
   7. Audience cards
   8. Process cards
   9. Tier / pricing cards
   10. Solution cards / role cards / case study layout
   11. Stat/proof cards
   12. Form panel section
   13. Footer
   14. Responsive
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand tokens — Atlas Carrier Group's real logo palette.
     --gold/--gold-2 hold chrome-silver values (not a second accent
     hue) per the one-accent-color rule; variable names kept as-is
     per the template's own reskin instructions. */
  --navy: #0b1e33;
  --navy-soft: #142a44;
  --blue: #3b7dc4;
  --blue-2: #6fa3d8;
  --gold: #c7d0d9;
  --gold-2: #e4e9ee;

  /* Light body theme */
  --bg-light: #f7f9fc;
  --bg-panel: #ffffff;
  --text-dark: #101826;
  --text-muted: #55617a;
  --line-light: rgba(16, 24, 38, 0.08);

  --radius: 20px;
  --max: 1180px;
}

/* ---------- 2. BASE / RESET ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-light);
  color: var(--text-dark);
  line-height: 1.55;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

section { padding: 90px 0; position: relative; }

.section-label {
  color: #3d6ee0;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 700;
}

h2 {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}

.section-copy { color: var(--text-muted); font-size: 1.05rem; max-width: 68ch; }

.section-head { max-width: 780px; margin: 0 auto 48px; text-align: center; }
.section-head .section-copy { margin: 0 auto; }

/* ---------- 3. NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(11, 30, 51, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(111, 163, 216, 0.12);
}

.nav-inner { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; gap: 16px; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #eef4ff;
}

.brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(59,125,196,0.25));
}

.brand-ai { color: var(--blue); text-shadow: 0 0 10px rgba(59,125,196,0.4); }

.nav-links { display: flex; gap: 26px; color: #b9c6e6; font-size: 0.95rem; }
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }

.nav-cta { padding: 11px 20px; font-size: 0.9rem; white-space: nowrap; }

/* Mobile hamburger toggle — hidden on desktop, shown only under the breakpoint below.
   CASCADE-ORDER WARNING: this base rule must stay physically BEFORE the
   @media(max-width:900px) override later in this file. Both rules have identical
   specificity (one class selector each), so CSS resolves the tie by source order, not
   relevance. If this base rule ever ends up after the media query block, the hamburger
   silently never appears at any screen size — no syntax error, no console warning, it
   just fails quietly. */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #eef4ff;
  border-radius: 2px;
  transition: transform 180ms ease, opacity 180ms ease;
}

.mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 10px 16px 22px;
  background: rgba(11, 30, 51, 0.98);
  border-bottom: 1px solid rgba(111, 163, 216, 0.12);
}

.mobile-menu a {
  padding: 14px 6px;
  color: #d6e2ff;
  font-size: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu .btn { margin-top: 10px; }

.mobile-menu.is-open { display: flex; }

/* ---------- 4. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.08);
  transition: 180ms ease;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-2));
  color: #04101c;
  box-shadow: 0 0 24px rgba(59,125,196,0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(59,125,196,0.35); }

.btn-secondary { background: rgba(255,255,255,0.06); color: #eef4ff; border-color: rgba(255,255,255,0.14); }
.btn-secondary:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.28); }

.btn-light { background: var(--navy); color: #fff; }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(11,30,51,0.18); }

/* ---------- 5. HERO ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: var(--navy);
  overflow: hidden;
}

.hero-video-wrap { position: absolute; inset: 0; z-index: 0; }

.hero-video-wrap video,
.hero-video-wrap .poster-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Muted/desaturated so hero copy stays legible over the footage.
     Tune these two values first if the hero still feels too vivid;
     .hero-scrim gradient below is the second knob. */
  filter: brightness(0.62) saturate(0.78);
}

.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,30,51,0.55) 0%, rgba(11,30,51,0.45) 40%, rgba(11,30,51,0.85) 82%, var(--bg-light) 100%);
}

.hero-content { position: relative; z-index: 2; padding: 60px 0 140px; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(111,163,216,0.18);
  color: var(--blue-2);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.hero h1 {
  margin: 0 auto 22px;
  max-width: 20ch;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #f5f8ff;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--blue-2), #ffffff 45%, var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-what {
  max-width: 46ch;
  margin: 0 auto 20px;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 600;
  color: var(--blue-2);
  letter-spacing: -0.01em;
}

.hero-sub { max-width: 62ch; margin: 0 auto 34px; color: #c3cfe8; font-size: 1.08rem; }

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Static hero variant for inner pages — same dark/scrim treatment as the homepage hero,
   without the video, since the video is deliberately a homepage-only first impression. */
.hero-static {
  min-height: 52vh;
  background:
    radial-gradient(720px 340px at 15% 0%, rgba(59,125,196,0.16), transparent 60%),
    radial-gradient(720px 340px at 85% 100%, rgba(199,208,217,0.13), transparent 60%),
    var(--navy);
}

.hero-scrim-static {
  background: linear-gradient(180deg, transparent 0%, transparent 55%, var(--bg-light) 100%);
}

/* Photo-backed inner-page hero (Solutions, How It Works, Pricing, Contact).
   No filter darkening like the homepage video gets, so this scrim carries
   more of the legibility work on its own — keep it darker than .hero-scrim-static. */
.hero-photo {
  background-size: cover;
  background-position: center;
}

.hero-scrim-photo {
  background:
    linear-gradient(180deg, rgba(11,30,51,0.72) 0%, rgba(11,30,51,0.6) 45%, rgba(11,30,51,0.9) 85%, var(--bg-light) 100%);
}

/* ---------- 6. LIGHT BODY / GENERIC PANELS ---------- */
.diagnosis-panel {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: 44px 40px;
  border-radius: 26px;
  background: var(--bg-panel);
  border: 1px solid var(--line-light);
  box-shadow: 0 20px 60px rgba(16,24,38,0.06);
}

.diagnosis-panel p { font-size: 1.3rem; line-height: 1.5; color: var(--text-dark); margin: 0; font-weight: 500; }
.diagnosis-panel p strong { color: #1c3faa; }

/* ---------- 7. AUDIENCE CARDS ---------- */
.audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-top: 20px; }

.audience-card {
  padding: 32px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--line-light);
  box-shadow: 0 14px 40px rgba(16,24,38,0.05);
}

.audience-card .tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.audience-card.variant-a .tag { background: rgba(199,208,217,0.25); color: #55617a; }
.audience-card.variant-b .tag { background: rgba(59,125,196,0.15); color: #1671b8; }

.audience-card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.audience-card p { margin: 0; color: var(--text-muted); }

/* ---------- 8. PROCESS CARDS ---------- */
.process { counter-reset: item; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; margin-top: 10px; }

.process-card {
  position: relative;
  padding: 30px 26px;
  border-radius: 22px;
  background: var(--bg-panel);
  border: 1px solid var(--line-light);
  box-shadow: 0 14px 40px rgba(16,24,38,0.05);
}

.process-card .num {
  counter-increment: item;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59,125,196,0.16), rgba(199,208,217,0.25));
  border: 1px solid rgba(16,24,38,0.08);
  color: #1c3faa;
  font-weight: 800;
  margin-bottom: 18px;
}

.process-card .num::before { content: counter(item, decimal-leading-zero); }
.process-card h4 { margin: 0 0 10px; font-size: 1.15rem; }
.process-card p { margin: 0; color: var(--text-muted); font-size: 0.97rem; }

/* ---------- 9. TIER / PRICING CARDS ---------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 10px; }

.tier-card {
  padding: 30px 26px;
  border-radius: 22px;
  background: var(--bg-panel);
  border: 1px solid var(--line-light);
  box-shadow: 0 14px 40px rgba(16,24,38,0.05);
}

.tier-card--top {
  background: var(--navy);
  border-color: rgba(255,255,255,0.08);
  color: #fff;
}

.tier-card--top .tier-name { color: #fff; }
.tier-card--top .tier-desc { color: #c3cfe8; }
.tier-card--top .tier-setup { color: #fff; }
.tier-card--top .tier-mrr { color: var(--blue-2); }

.tier-name { font-weight: 800; font-size: 1.1rem; margin-bottom: 14px; }

.tier-price { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.tier-setup { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text-dark); }
.tier-mrr { font-size: 0.95rem; color: #1c3faa; font-weight: 600; }

.tier-desc { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* Paired tier detail cards (two tiers side by side) */
.tier-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }

.tier-detail-card {
  padding: 32px;
  border-radius: 24px;
  background: var(--bg-panel);
  border: 1px solid var(--line-light);
  box-shadow: 0 14px 40px rgba(16,24,38,0.05);
}

.tier-detail-card--dark {
  background: var(--navy);
  border-color: rgba(255,255,255,0.08);
  color: #fff;
}

.tier-detail-card--dark .section-copy,
.tier-detail-card--dark p { color: #c3cfe8; }
.tier-detail-card--dark h2, .tier-detail-card--dark h3 { color: #fff; }

.tier-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.tier-detail-img {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

.tier-detail-header h2 { margin: 0; }

/* Included-features list — used inside tier detail sections on the Pricing page */
.included-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.included-list li {
  position: relative;
  padding-left: 28px;
  color: var(--text-muted);
}

.included-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1671b8;
  font-weight: 800;
}

.included-list li strong { color: var(--text-dark); }

/* Dark-section variant (used on the top-tier / enterprise block) */
.included-list.on-dark li { color: #c3cfe8; }
.included-list.on-dark li strong { color: #fff; }
.included-list.on-dark li::before { color: var(--blue-2); }

/* Comparison table */
.comparison-table-wrap { overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; background: var(--bg-panel); border-radius: 18px; overflow: hidden; }
.comparison-table th, .comparison-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-light);
  font-size: 0.94rem;
}
.comparison-table th { background: var(--navy); color: #fff; font-weight: 700; }
.comparison-table td { color: var(--text-muted); }
.comparison-table td:first-child { color: var(--text-dark); font-weight: 600; }
.comparison-table tr:last-child td { border-bottom: none; }

/* ---------- 10. SOLUTION CARDS / CASE STUDY LAYOUT ---------- */
.solution-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; margin-top: 10px; }

.solution-card {
  padding: 30px 28px;
  border-radius: 22px;
  background: var(--bg-panel);
  border: 1px solid var(--line-light);
  box-shadow: 0 14px 40px rgba(16,24,38,0.05);
}

.solution-card .tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(59,125,196,0.12);
  color: #1671b8;
  margin-bottom: 14px;
}

.solution-card h3 { margin: 0 0 10px; font-size: 1.2rem; }
.solution-card p { margin: 0; color: var(--text-muted); }

/* ---------- 11. STAT / PROOF CARDS ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 10px; }

.stat-card {
  padding: 28px;
  border-radius: 20px;
  text-align: center;
  background: var(--navy);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
}

.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--blue-2);
  margin-bottom: 8px;
}

.stat-card .stat-label { color: #b9c6e6; font-size: 0.92rem; }

/* ---------- 12. FORM PANEL SECTION ---------- */
.eval-section { background: var(--navy); color: #fff; }
.eval-section .section-label { color: var(--blue-2); }
.eval-section h2 { color: #fff; }
.eval-section .section-copy { color: #c3cfe8; }

.eval-points { display: grid; gap: 16px; }

.eval-point {
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.eval-point strong { display: block; margin-bottom: 4px; }
.eval-point span { color: #b9c6e6; font-size: 0.92rem; }

.form-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 22px;
  padding: 30px;
}

.form-panel label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: #d6e2ff; }

.form-panel input,
.form-panel textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-family: inherit;
  font-size: 0.98rem;
}

.form-panel select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-family: inherit;
  font-size: 0.98rem;
}

.form-panel textarea { resize: vertical; }
.form-panel input::placeholder,
.form-panel textarea::placeholder { color: #7d8cae; }

/* ---------- 13. FOOTER ---------- */
.cta-final { text-align: center; }
.cta-final .diagnosis-panel { margin-bottom: 30px; }

footer { padding: 26px 0 46px; color: var(--text-muted); font-size: 0.92rem; background: var(--bg-light); }

.footer-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-light), transparent);
  margin-bottom: 18px;
}

.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.footer-contact-group { display: inline-flex; gap: 6px; margin-left: 18px; }
.footer-contact-group a { color: #1c3faa; font-weight: 600; }

.social-links { display: inline-flex; gap: 14px; align-items: center; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-panel);
  border: 1px solid var(--line-light);
  transition: 160ms ease;
}
.social-links a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16,24,38,0.1); }
.social-links img { width: 18px; height: 18px; object-fit: contain; }

/* ---------- 13b. LEGAL / LONG-FORM PROSE (Privacy Policy, Terms of Service) ---------- */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-panel);
  border: 1px solid var(--line-light);
  border-radius: 24px;
  padding: 48px clamp(24px, 5vw, 56px);
  box-shadow: 0 14px 40px rgba(16,24,38,0.05);
}

.legal-content .legal-meta {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-light);
}

.legal-content .legal-meta p { margin: 4px 0; }

.legal-content h2 {
  font-size: 1.3rem;
  margin-top: 40px;
  margin-bottom: 12px;
}

.legal-content h2:first-of-type { margin-top: 0; }

.legal-content p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 16px;
}

.legal-content ul {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--text-muted);
}

.legal-content ul li { margin-bottom: 8px; line-height: 1.6; }

.legal-content .legal-disclaimer {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line-light);
  font-size: 0.9rem;
  font-style: italic;
}

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width: 900px) {
  .audience-grid, .process, .stat-grid, .tier-grid, .solution-grid, .tier-pair { grid-template-columns: 1fr; }

  /* This override MUST come after the base .mobile-menu-toggle{display:none} rule
     above (see CASCADE-ORDER WARNING in section 3) or the hamburger never shows. */
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .mobile-menu-toggle { display: flex; }
}