.node-hero { position:relative; overflow:hidden; background:var(--bg); }
.node-hero-blob { position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.node-hero-blob--a { top:-60px; right:-40px; width:440px; height:400px; filter:blur(64px); background:radial-gradient(circle,rgba(83,158,67,.14),transparent 65%); animation:svc-drift 22s ease-in-out infinite; }
.node-hero-blob--b { bottom:0; left:-40px; width:360px; height:300px; filter:blur(60px); background:radial-gradient(circle,rgba(109,93,252,.1),transparent 65%); animation:svc-drift 26s ease-in-out infinite reverse; }
.node-hero-in { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding-top:130px; padding-bottom:80px; }
.node-hero-copy h1 { font-size:clamp(30px,3.8vw,54px); letter-spacing:-.04em; line-height:1.06; margin-bottom:16px; }
.node-hero-sub { font-size:clamp(15px,1.3vw,17px); color:var(--ink-soft); line-height:1.65; max-width:460px; margin-bottom:26px; }
.node-hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.node-hero-pills { display:flex; flex-wrap:wrap; gap:8px; }

/* Event loop SVG visual */
.node-hero-visual { position:relative; display:flex; align-items:center; justify-content:center; }
.node-event-loop { position:relative; display:flex; align-items:center; justify-content:center; }
.node-loop-svg { width:100%; max-width:340px; filter:drop-shadow(0 16px 40px rgba(83,158,67,.2)); animation:svc-float 8s ease-in-out infinite; }
.node-ring-spin { transform-origin:170px 170px; animation:node-loop-spin 4s linear infinite; }
@keyframes node-loop-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Why Node.js */
.node-why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.node-why-card { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:28px; transition:.35s cubic-bezier(.2,.7,.2,1); }
.node-why-card:hover { transform:translateY(-4px); border-color:rgba(83,158,67,.35); box-shadow:0 20px 40px -20px rgba(83,158,67,.18); }
.node-why-ico { width:42px; height:42px; border-radius:12px; background:rgba(83,158,67,.1); border:1px solid rgba(83,158,67,.2); display:grid; place-items:center; margin-bottom:14px; }
.node-why-ico svg { width:20px; height:20px; stroke:#539E43; stroke-width:1.5; fill:none; }
.node-why-card h3 { font-size:16px; font-weight:700; margin-bottom:8px; letter-spacing:-.015em; }
.node-why-card p  { font-size:14px; color:var(--muted); line-height:1.7; margin:0; }

/* MERN section */
.node-mern-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.node-mern-copy p { font-size:15.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:14px; }
.node-mern-stack { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px; }
.node-mern-item { background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:12px 16px; text-align:center; flex:1; min-width:80px; }
.node-mern-item b { display:block; font-family:var(--font-heading); font-size:22px; font-weight:900; line-height:1; margin-bottom:2px; letter-spacing:-.02em; }
.node-mern-item span { display:block; font-family:var(--font-body); font-size:11px; font-weight:600; color:var(--ink-soft); margin-bottom:3px; }
.node-mern-item small { font-family:var(--font-body); font-size:10px; color:var(--muted); }
.node-mern-item--m b { color:#10AA50; }
.node-mern-item--e b { color:#539E43; }
.node-mern-item--r b { color:#61dafb; }
.node-mern-item--n b { color:#539E43; }
.node-mern-arrow { font-family:var(--font-heading); font-size:20px; font-weight:700; color:var(--muted); flex-shrink:0; }

/* MERN layers stack */
.node-mern-layers { display:flex; flex-direction:column; gap:0; }
.node-mern-layer { background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:14px 18px; display:flex; align-items:center; gap:12px; box-shadow:0 2px 12px -6px rgba(14,14,24,.08); }
.node-mern-layer--react  { border-color:rgba(97,218,251,.3); background:rgba(97,218,251,.04); }
.node-mern-layer--express{ border-color:rgba(83,158,67,.3);  background:rgba(83,158,67,.04); }
.node-mern-layer--mongo  { border-color:rgba(16,170,80,.3);  background:rgba(16,170,80,.04); }
.node-mern-layer-icon { width:36px; height:36px; border-radius:10px; background:var(--bg-soft); border:1px solid var(--line); display:grid; place-items:center; flex-shrink:0; }
.node-mern-layer b { display:block; font-family:var(--font-heading); font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.node-mern-layer span { font-family:var(--font-body); font-size:11.5px; color:var(--muted); }
.node-layer-tag { font-family:var(--font-heading); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:var(--bg-soft); border:1px solid var(--line); padding:3px 8px; border-radius:999px; white-space:nowrap; margin-left:auto; flex-shrink:0; }
.node-mern-connector { display:flex; align-items:center; gap:10px; padding:6px 18px; }
.node-mern-conn-line { flex:1; height:1.5px; background:linear-gradient(to right,transparent,var(--line-2),transparent); }
.node-mern-connector span { font-family:var(--font-body); font-size:11px; color:var(--muted); font-style:italic; white-space:nowrap; }

/* Live work */
.node-live-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:880px; margin:0 auto; }
.node-live-card { background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:26px; transition:.35s cubic-bezier(.2,.7,.2,1); }
.node-live-card:hover { transform:translateY(-4px); border-color:rgba(83,158,67,.3); box-shadow:0 20px 40px -20px rgba(83,158,67,.16); }
.node-live-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.node-live-ico { width:48px; height:48px; border-radius:14px; background:rgba(83,158,67,.1); border:1px solid rgba(83,158,67,.2); display:grid; place-items:center; flex-shrink:0; }
.node-live-ico--fb { background:rgba(255,163,0,.1); border-color:rgba(255,163,0,.2); }
.node-live-head h3 { font-size:16px; font-weight:700; margin-bottom:3px; letter-spacing:-.015em; }
.node-live-head span { font-family:var(--font-body); font-size:11.5px; color:var(--muted); }
.node-live-card p { font-size:14px; color:var(--muted); line-height:1.65; margin-bottom:14px; }
.node-live-stack { display:flex; flex-wrap:wrap; gap:6px; }
.node-live-stack span { font-family:var(--font-heading); font-size:11px; font-weight:600; color:#059669; background:rgba(5,150,105,.08); border:1px solid rgba(5,150,105,.2); padding:3px 9px; border-radius:999px; }

/* ── Node.js responsive ─────────────────────────────── */
@media (max-width:1024px) {
  .node-hero-in    { grid-template-columns:1fr; padding-top:116px; }
  .node-hero-visual{ display:none; }
  .node-why-grid   { grid-template-columns:1fr; }
  .node-mern-grid  { grid-template-columns:1fr; gap:40px; }
  .node-live-grid  { grid-template-columns:1fr; }
  .node-mern-stack { justify-content:center; }
}
@media (max-width:640px) {
  .node-hero-in { padding-top:104px; padding-bottom:56px; }
  .node-mern-arrow { display:none; }
}

/* ============================================================
   UI/UX DESIGN PAGE  (.uxd-*)
   ============================================================ */

/* Hero */
/* Layout wrappers */
.node-mern-visual { }