/* TubeGenix — "Niche radar" section. Pure CSS animation, no JS.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> */

.nr { --violet:#5B3DF5; --violet-2:#7C5CFF; --teal:#0E8F7E; --teal-2:#34D9A8; --ink:#17150F;
  --body:#5c574f; --faint:#a09a92; --line:#ece9e3; --loop:3.2s;
  background:#fff; padding:92px 40px 104px; display:flex; flex-direction:column; align-items:center; gap:14px;
  font-family:'Space Grotesk', Helvetica, Arial, sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; }

.nr-eyebrow { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#8b8781; }
.nr-title { margin:0; font-size:50px; font-weight:700; letter-spacing:-.038em; line-height:1.07; text-align:center; max-width:900px; text-wrap:balance; }
.nr-title em { font-style:normal; color:var(--violet); }
.nr-sub { margin:0; font-size:17.5px; line-height:1.55; color:var(--body); text-align:center; max-width:600px; text-wrap:pretty; }
.nr-btn { margin-top:26px; display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
  background:linear-gradient(135deg,var(--violet-2),#4E27E8); border-radius:11px; padding:15px 24px;
  font-size:15.5px; font-weight:600; box-shadow:0 10px 26px rgba(91,61,245,.28); transition:filter .2s ease; }
.nr-btn:hover { filter:brightness(1.06); }

.nr-viewport { width:100%; max-width:1200px; overflow:hidden; display:flex; justify-content:center; margin-top:40px; }
/* The diagram is a fixed 1200x420 coordinate space (offset-path values depend on it),
   so it is zoomed down instead of reflowed. */
.nr-stage { position:relative; width:1200px; height:420px; flex:none; }
@media (max-width:1280px) { .nr-stage { zoom:.82; } }
@media (max-width:1060px) { .nr-stage { zoom:.66; } }
@media (max-width:880px)  { .nr-stage { zoom:.54; } }
@media (max-width:720px)  { .nr-stage { zoom:.44; } }

.nr-wires { position:absolute; inset:0; }
.nr-wires g { animation:nr-dash 2s linear infinite; }
.nr-dot { position:absolute; top:0; left:0; width:11px; height:11px; border-radius:50%;
  background:var(--violet); box-shadow:0 0 0 4px rgba(91,61,245,.16); offset-rotate:0deg;
  animation:nr-flow var(--loop) linear infinite; }
.nr-dot--out { width:9px; height:9px; background:var(--teal); box-shadow:0 0 0 4px rgba(14,143,126,.14); }
.nr-dot--1 { offset-path:path('M360 72 C450 72 480 140 534 190'); }
.nr-dot--2 { offset-path:path('M360 202 C430 202 470 208 534 210'); animation-delay:.5s; }
.nr-dot--3 { offset-path:path('M360 332 C450 332 480 275 534 230'); animation-delay:1s; }
.nr-dot--4 { offset-path:path('M666 190 C760 140 860 96 1006 88');  animation-delay:1.5s; }
.nr-dot--5 { offset-path:path('M666 210 C760 210 860 214 1006 218'); animation-delay:2s; }
.nr-dot--6 { offset-path:path('M666 230 C760 280 860 336 1006 348'); animation-delay:2.5s; }

.nr-card { position:absolute; left:40px; width:320px; box-sizing:border-box; background:var(--ink); border-radius:14px;
  padding:12px 16px; display:flex; align-items:center; gap:12px; box-shadow:0 10px 26px rgba(23,21,15,.16);
  animation:nr-in var(--loop) ease-out infinite; }
.nr-card--1 { top:40px; }
.nr-card--2 { top:170px; animation-delay:.5s; }
.nr-card--3 { top:300px; animation-delay:1s; }
.nr-card-icon { width:30px; height:22px; display:flex; align-items:center; justify-content:center; flex:none; }
.nr-card-icon img { width:24px; height:auto; display:block; }
.nr-card-label { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8b8781; }
.nr-card-tick { width:20px; height:20px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; flex:none;
  animation:nr-tick var(--loop) ease-out infinite; }
.nr-card--2 .nr-card-tick { animation-delay:.5s; }
.nr-card--3 .nr-card-tick { animation-delay:1s; }
.nr-card-meta { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:1px; }
.nr-card-meta b { font-size:14px; font-weight:600; color:#faf9f7; }
.nr-card-meta span { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--teal-2); }

.nr-hub { position:absolute; left:534px; top:144px; width:132px; height:132px; display:flex; align-items:center; justify-content:center; }
.nr-ring { position:absolute; inset:0; border-radius:50%; border:1.5px solid #ded9f6; animation:nr-pulse var(--loop) ease-out infinite; }
.nr-ring:nth-child(2) { animation-delay:1.06s; }
.nr-ring:nth-child(3) { animation-delay:2.13s; }
.nr-hub-disc { position:relative; width:96px; height:96px; border-radius:50%; background:#fff;
  box-shadow:0 16px 40px rgba(67,24,217,.18), 0 0 0 1px #efecfb; display:flex; align-items:center; justify-content:center;
  animation:nr-bob 4.4s ease-in-out infinite; }
.nr-hub-disc img { width:56px; height:56px; display:block; }

.nr-out { position:absolute; left:1016px; width:96px; height:96px; box-sizing:border-box; background:#fff;
  border:1px solid var(--line); border-radius:22px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(23,21,15,.10); animation:nr-land var(--loop) ease-out infinite; }
.nr-out img { width:52px; height:52px; object-fit:contain; display:block; }
.nr-out--1 { top:40px;  animation-delay:1.5s; }
.nr-out--2 { top:170px; animation-delay:2s; }
.nr-out--2 img { width:60px; height:auto; }
.nr-out--3 { top:300px; animation-delay:2.5s; }
.nr-out--3 img { border-radius:12px; }
.nr-out-label { position:absolute; left:1016px; width:96px; text-align:center; font-size:12.5px; font-weight:600; color:var(--body); }
.nr-out-label--1 { top:144px; }
.nr-out-label--2 { top:274px; }
.nr-out-label--3 { top:404px; }

@keyframes nr-flow { 0% { offset-distance:0%; opacity:0; } 8% { opacity:1; } 88% { opacity:1; } 100% { offset-distance:100%; opacity:0; } }
@keyframes nr-pulse { 0% { transform:scale(.72); opacity:.55; } 70% { opacity:0; } 100% { transform:scale(1.5); opacity:0; } }
@keyframes nr-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes nr-in { 0%,6% { opacity:0; transform:translateX(-14px); } 18%,100% { opacity:1; transform:translateX(0); } }
@keyframes nr-land { 0%,40% { transform:scale(1); box-shadow:0 6px 18px rgba(23,21,15,.10); } 48% { transform:scale(1.06); box-shadow:0 10px 26px rgba(91,61,245,.22); } 58%,100% { transform:scale(1); box-shadow:0 6px 18px rgba(23,21,15,.10); } }
@keyframes nr-dash { to { stroke-dashoffset:-18; } }
@keyframes nr-tick { 0%,10% { transform:scale(.5); opacity:0; } 22%,100% { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .nr *, .nr *::before, .nr *::after { animation:none !important; } }