/* Marketing site — NEXT Exservices */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-body); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
section { padding: 96px 0; }

/* --- Nav --- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(247,247,244,0.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height: 80px; }
.nav-logo { height: 56px; width: auto; display: block; }
.nav-links { display:flex; gap: 32px; font: 500 14px/1 var(--font-body); }
.nav-links a { color: var(--nx-ink-700); transition: color var(--dur-micro); }
.nav-links a:hover { color: var(--nx-ink-900); }

/* --- Hero --- */
.hero { padding: 96px 0 64px; }
.hero-eyebrow { font: 500 13px/1 var(--font-mono); color: var(--nx-ink-500); margin-bottom: 32px; letter-spacing: 0; }
.hero h1 { font: 600 92px/1.02 var(--font-display); letter-spacing: -0.03em; color: var(--nx-ink-900); max-width: 960px; }
.hero h1 .c1 { color: var(--nx-blue); }
.hero h1 .c2 { color: var(--nx-amber-700); }
.hero h1 .c3 { color: var(--nx-red); }
.hero h1 .c4 { color: var(--nx-green); }
.hero p { font: 400 20px/1.5 var(--font-body); color: var(--nx-ink-700); margin-top: 28px; max-width: 640px; }
.hero-ctas { margin-top: 40px; display: flex; gap: 12px; }

/* Hero visual — oversized pinwheel as editorial element */
.hero-visual { position: relative; margin-top: 72px; height: 360px; border-top: 1px solid var(--border-subtle); display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-tile { padding: 32px 24px; border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; justify-content: space-between; min-height: 360px; }
.hero-tile:last-child { border-right: 0; }
.hero-tile .num { font: 500 13px/1 var(--font-mono); color: var(--nx-ink-500); }
.hero-tile .label { font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; }
.hero-tile h3 { font: 600 28px/1.1 var(--font-display); letter-spacing: -0.01em; }
.hero-tile p { font: 400 14px/1.5 var(--font-body); color: var(--nx-ink-500); margin-top: 8px; }
.hero-tile .bar { width: 32px; height: 3px; }

/* --- Section intros --- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 48px; }
.section-head h2 { font: 600 48px/1.08 var(--font-display); letter-spacing: -0.02em; max-width: 700px; }
.section-head .hash { font: 500 13px var(--font-mono); color: var(--nx-ink-500); }

/* --- Quadrants --- */
.quadrants { background: var(--nx-paper); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.quad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--border-subtle); }
.quad { padding: 48px; border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); position: relative; transition: background var(--dur-standard); }
.quad:nth-child(2n) { border-right: 0; }
.quad:nth-last-child(-n+2) { border-bottom: 0; }
.quad:hover { background: var(--bg-sunken); }
.quad .num { position:absolute; top: 24px; right: 32px; font: 500 12px/1 var(--font-mono); color: var(--nx-ink-300); }
.quad-bar { width: 48px; height: 4px; margin-bottom: 24px; }
.quad-label { font: 600 12px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.quad h3 { font: 600 32px/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--nx-ink-900); }
.quad p { font: 400 16px/1.55 var(--font-body); color: var(--nx-ink-700); margin-top: 12px; max-width: 440px; }
.quad ul { list-style: none; margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px; }
.quad ul li { font: 500 12px/1 var(--font-body); padding: 6px 10px; background: var(--bg-page); border-radius: 2px; color: var(--nx-ink-700); }
.quad .arrow { margin-top: 32px; display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--font-body); color: var(--nx-ink-900); }

/* --- Manifesto --- */
.manifesto { background: var(--nx-ink-900); color: var(--nx-paper); padding: 128px 0; }
.manifesto .eyebrow { font: 500 13px var(--font-mono); color: var(--nx-ink-300); margin-bottom: 48px; }
.manifesto blockquote { font: 500 56px/1.15 var(--font-display); letter-spacing: -0.02em; max-width: 1000px; }
.manifesto blockquote .mark { color: var(--nx-amber); }
.manifesto .sig { margin-top: 48px; display: flex; align-items: center; gap: 16px; font: 400 15px var(--font-body); color: var(--nx-ink-300); }
.manifesto .sig .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #537EBE, #E3AC21); border: 2px solid var(--nx-paper); }

/* --- Cases --- */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case {
  background: var(--nx-paper); border: 1px solid var(--border-subtle); border-radius: 4px;
  overflow: hidden; transition: box-shadow var(--dur-standard), transform var(--dur-standard);
  position: relative;
}
.case:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.case::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.case.blue::before  { background: var(--nx-blue); }
.case.amber::before { background: var(--nx-amber); }
.case.red::before   { background: var(--nx-red); }
.case .thumb { aspect-ratio: 16 / 10; background: var(--bg-sunken); display:flex; align-items:center; justify-content:center; color: var(--nx-ink-300); font: 500 12px var(--font-mono); }
.case .thumb.blue  { background: linear-gradient(135deg, #EAF0F9, #C5D6EE); }
.case .thumb.amber { background: linear-gradient(135deg, #FBF2D3, #F5DF95); }
.case .thumb.red   { background: linear-gradient(135deg, #F9E4DE, #EFB8A9); }
.case .body { padding: 24px; }
.case .label { font: 600 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; }
.case.blue  .label { color: var(--nx-blue); }
.case.amber .label { color: var(--nx-amber-700); }
.case.red   .label { color: var(--nx-red); }
.case h3 { font: 600 20px/1.25 var(--font-display); color: var(--nx-ink-900); }
.case p { font: 400 14px/1.55 var(--font-body); color: var(--nx-ink-500); margin-top: 8px; }
.case .meta { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; font: 500 12px var(--font-mono); color: var(--nx-ink-500); }

/* --- Process --- */
.process { background: var(--bg-sunken); }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.step { background: var(--nx-paper); padding: 32px; display: flex; flex-direction: column; gap: 16px; min-height: 240px; }
.step .n { font: 600 13px var(--font-mono); color: var(--nx-ink-500); }
.step .circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.step h3 { font: 600 20px/1.2 var(--font-display); }
.step p { font: 400 14px/1.5 var(--font-body); color: var(--nx-ink-500); }

/* --- Contact --- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.contact .intro h2 { font: 600 56px/1.05 var(--font-display); letter-spacing: -0.02em; }
.contact .intro p { font: 400 18px/1.5 var(--font-body); color: var(--nx-ink-500); margin-top: 20px; }
.contact .intro .hash { font: 500 14px var(--font-mono); color: var(--nx-ink-500); margin-top: 32px; display: block; }
.contact form { display: flex; flex-direction: column; gap: 16px; }
.contact .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact label { font: 500 12px var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--nx-ink-500); margin-bottom: 6px; display: block; }
.contact input, .contact select, .contact textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--border-subtle);
  background: var(--nx-paper); border-radius: 2px; font: 400 15px var(--font-body); color: var(--nx-ink-900);
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
}
.contact input:focus, .contact select:focus, .contact textarea:focus { outline:0; border-color: var(--nx-blue); box-shadow: var(--shadow-focus); }
.contact textarea { min-height: 120px; resize: vertical; }

/* --- Footer --- */
.footer { background: var(--nx-ink-900); color: var(--nx-ink-300); padding: 80px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font: 600 12px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nx-paper); margin-bottom: 16px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font: 400 14px var(--font-body); }
.footer a { color: inherit; text-decoration: none; transition: color .18s ease; }
.footer a:hover { color: var(--nx-paper); }
.footer .brand p { font: 400 14px/1.55 var(--font-body); color: var(--nx-ink-300); max-width: 320px; margin-top: 16px; }
.footer .bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; font: 500 12px var(--font-mono); color: var(--nx-ink-300); }
.footer .bottom .hash { color: var(--nx-amber); }

/* --- Stats --- */
.stats { padding: 64px 0; background: var(--nx-ink-900); color: var(--nx-paper); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat { padding: 0 32px; border-right: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 10px; }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat-bar { width: 32px; height: 3px; margin-bottom: 8px; }
.stat-n { font: 600 72px/0.95 var(--font-display); letter-spacing: -0.03em; }
.stat-label { font: 600 14px/1 var(--font-body); color: var(--nx-paper); margin-top: 4px; }
.stat-sub { font: 400 13px/1.45 var(--font-body); color: var(--nx-ink-300); }

/* --- Timeline --- */
.timeline { background: var(--nx-paper); border-top: 1px solid var(--border-subtle); }
.timeline-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.tl-event { padding: 0 28px 0 0; position: relative; }
.tl-year { font: 600 56px/1 var(--font-display); letter-spacing: -0.02em; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; margin: 24px 0 0 0; position: relative; z-index: 2; }
.tl-line { position: absolute; top: 90px; left: 7px; right: 0; height: 1px; background: var(--border-subtle); z-index: 1; }
.tl-event:last-child .tl-line { display: none; }
.tl-event h3 { font: 600 22px/1.2 var(--font-display); letter-spacing: -0.01em; margin-top: 28px; color: var(--nx-ink-900); }
.tl-event p { font: 400 14px/1.55 var(--font-body); color: var(--nx-ink-500); margin-top: 10px; max-width: 260px; }

.bg-blue  { background: var(--nx-blue);  }
.bg-amber { background: var(--nx-amber); }
.bg-red   { background: var(--nx-red);   }
.bg-green { background: var(--nx-green); }