/* NorthGrid Logistics   design system */
:root {
  --qr-orange: #F97316;
  --qr-orange-dark: #C2410C;
  --qr-orange-soft: #FFEDD5;
  --qr-steel: #0B1B2B;
  --qr-steel-2: #15263A;
  --qr-steel-3: #1F3A55;
  --qr-fog: #F4F7FA;
  --qr-line: #E2E8F0;
  --qr-text: #0F172A;
  --qr-muted: #475569;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--qr-fog);
  color: var(--qr-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--qr-line);
}

/* Hero */
.hero {
  position: relative;
  background:
    linear-gradient(120deg, rgba(11,27,43,0.92) 0%, rgba(21,38,58,0.78) 55%, rgba(11,27,43,0.55) 100%),
    url('../assets/hero.jpg') center/cover no-repeat;
  color: white;
  overflow: hidden;
}
.hero::after {
  content:""; position:absolute; right:-120px; bottom:-120px;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(249,115,22,0.35), transparent 70%);
  pointer-events:none;
}

.page-header {
  background: linear-gradient(135deg, var(--qr-steel) 0%, var(--qr-steel-3) 100%);
  color:white; position:relative; overflow:hidden;
}
.page-header::after {
  content:""; position:absolute; right:-80px; top:-80px;
  width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(249,115,22,0.28), transparent 70%);
}

/* Buttons */
.btn-primary {
  background: var(--qr-orange); color: white; font-weight: 600;
  padding: .9rem 1.75rem; border-radius: .5rem;
  display:inline-flex; align-items:center; gap:.5rem;
  box-shadow: 0 6px 18px rgba(249,115,22,0.35);
  transition: all .2s ease;
}
.btn-primary:hover { background:#FB923C; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(249,115,22,0.45); }

.btn-outline {
  border: 2px solid rgba(255,255,255,0.6); color:white;
  font-weight:600; padding:.75rem 1.625rem; border-radius:.5rem;
  display:inline-flex; align-items:center; gap:.5rem;
  transition: all .2s ease;
}
.btn-outline:hover { background:white; color: var(--qr-steel); border-color:white; }

.btn-ghost {
  color: var(--qr-orange); font-weight:600;
  display:inline-flex; align-items:center; gap:.35rem;
}
.btn-ghost:hover { color: var(--qr-orange-dark); }

/* Accent */
.accent-bar { width: 56px; height: 4px; background: var(--qr-orange); border-radius:2px; }
.eyebrow { color: var(--qr-orange); font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; }

/* Cards */
.card {
  background:white; border:1px solid rgba(15,23,42,0.06);
  border-radius:14px; padding:1.75rem;
  transition: all .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -12px rgba(15,23,42,0.18); border-color: rgba(249,115,22,0.4); }

.icon-chip {
  width:52px; height:52px; border-radius:12px;
  background: linear-gradient(135deg, #FFEDD5, #FED7AA);
  color: var(--qr-orange-dark);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
}
.icon-chip-dark {
  width:52px; height:52px; border-radius:12px;
  background: rgba(249,115,22,0.15); color: #FDBA74;
  display:inline-flex; align-items:center; justify-content:center;
}

.stat-card {
  background: linear-gradient(135deg, var(--qr-steel) 0%, var(--qr-steel-3) 100%);
  color:white; border-radius:14px; padding: 1.75rem;
}

/* Nav */
.nav-link { position:relative; padding:.5rem 0; transition: color .15s; color: var(--qr-text); font-weight: 500; }
.nav-link:hover { color: var(--qr-orange); }
.nav-link.active { color: var(--qr-orange); }
.nav-link.active::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:2px; background: var(--qr-orange); border-radius:1px;
}

/* Mobile nav */
.mobile-nav { display:none; }
.mobile-nav.open { display:flex; }

/* Form */
.form-input {
  width:100%; padding:.875rem 1rem;
  border:1.5px solid var(--qr-line); border-radius:.5rem;
  background:white; font-size:1rem; transition: all .15s ease;
}
.form-input:focus { outline:none; border-color: var(--qr-orange); box-shadow: 0 0 0 4px rgba(249,115,22,0.15); }

/* Reveal */
.reveal { opacity:0; transform: translateY(20px); transition: all .7s ease; }
.reveal.in { opacity:1; transform: translateY(0); }

/* Subtle grid */
.grid-bg {
  background-image:
    linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Dotted bg on dark */
.dot-bg {
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}

footer a:hover { color: var(--qr-orange); }

/* Process step */
.step-num {
  width: 44px; height: 44px; border-radius:50%;
  background: var(--qr-orange); color:white; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  font-family: 'Space Grotesk', sans-serif;
}

/* Marquee strip */
.strip {
  background: var(--qr-steel); color: rgba(255,255,255,0.7);
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
}