/* ============================================================
   Nexo — Site (marketing) styles — v2 editorial
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--nexo-bg);
  color: var(--nexo-ink);
  font-family: var(--nexo-font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; }

.nx-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.nx-container-narrow { max-width: 960px; margin: 0 auto; padding: 0 32px; }

/* ---------- NAV ---------- */
.nx-nav {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  background: rgba(255,247,237,.82);
  border-bottom: 1px solid var(--nexo-line);
}
.nx-nav-inner { display:flex; align-items:center; justify-content:space-between; height:68px; }
.nx-nav-brand {
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:19px; letter-spacing:-.02em; color:var(--nexo-ink);
}
.nx-nav-brand .dot {
  width:26px; height:26px; border-radius:8px;
  background:var(--nexo-accent-grad);
  box-shadow:var(--nexo-shadow-accent);
  display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:13px;
  font-family:var(--nexo-font-serif); font-style:italic;
}
.nx-nav-links { display:flex; align-items:center; gap:32px; }
.nx-nav-link { font-size:14.5px; font-weight:500; color:var(--nexo-ink-3); transition:color .15s; }
.nx-nav-link:hover { color:var(--nexo-ink); }
.nx-nav-cta { display:flex; align-items:center; gap:12px; }

/* ---------- BUTTONS ---------- */
.nx-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px;
  font-weight:500; font-size:14.5px;
  border-radius:10px;
  transition:all .18s ease;
  white-space:nowrap;
}
.nx-btn--primary { background:var(--nexo-warm-deep); color:#fff; }
.nx-btn--primary:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(61,36,24,.28); }
.nx-btn--accent {
  background:var(--nexo-accent-grad-deep);
  color:#fff;
  box-shadow:var(--nexo-shadow-accent);
}
.nx-btn--accent:hover { transform:translateY(-1px); box-shadow:var(--nexo-shadow-accent-hover); }
.nx-btn--outline { background:#fff; color:var(--nexo-ink); box-shadow:inset 0 0 0 1px var(--nexo-line-2); }
.nx-btn--outline:hover { box-shadow:inset 0 0 0 1px var(--nexo-ink); }
.nx-btn--lg { height:52px; padding:0 26px; font-size:15.5px; }

/* ---------- Editorial type helpers ---------- */
.nx-italic {
  font-family:var(--nexo-font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--nexo-accent-deep);
}
.nx-italic-grad {
  font-family:var(--nexo-font-serif);
  font-style:italic;
  font-weight:400;
  background:linear-gradient(135deg,#ff6b00,#ff4400);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ---------- Hand-drawn / annotation ---------- */
.nx-handwrite {
  font-family:var(--nexo-font-serif);
  font-style:italic;
  font-weight:500;
  color:var(--nexo-accent-deep);
}

/* ---------- Animations on scroll ---------- */
@keyframes nx-fade-up {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.nx-reveal { opacity:0; }
.nx-reveal.in { animation: nx-fade-up .7s cubic-bezier(.22,.8,.36,1) forwards; }
.nx-reveal.d1 { animation-delay:.08s; }
.nx-reveal.d2 { animation-delay:.16s; }
.nx-reveal.d3 { animation-delay:.24s; }
.nx-reveal.d4 { animation-delay:.32s; }

/* ---------- Number ticker ---------- */
.nx-ticker {
  font-family:var(--nexo-font-ui);
  font-weight:600;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}

/* ---------- Pencil underline svg hack ---------- */
.nx-pencil {
  position:relative;
  display:inline-block;
}
.nx-pencil::after {
  content:'';
  position:absolute;
  left:-2%; right:-2%;
  bottom:-6px;
  height:10px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 Q 50 2 100 5 T 198 4' stroke='%23ff6b00' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") no-repeat;
  background-size:100% 100%;
}

/* ---------- Footer ---------- */
.nx-footer { background:var(--nexo-warm-deep); color:#fff; padding:80px 0 40px; }
.nx-footer a { color:rgba(255,255,255,.7); transition:color .15s; }
.nx-footer a:hover { color:#fff; }

/* ---------- Noise overlay (subtle paper texture) ---------- */
.nx-noise::before {
  content:'';
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.4;
  z-index:0;
}

/* ---------- Ticker marquee (client names) ---------- */
@keyframes nx-marquee {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.nx-marquee {
  display:flex; gap:48px; width:max-content;
  animation: nx-marquee 40s linear infinite;
}