/* ============================================================
   simplicio-loop — page-specific enhancements, layered on top of
   simpleti.css. Brand logos, hero image, animated loop ring,
   pipeline. Does NOT touch the shared /simplicio styles.
   ============================================================ */

/* ---------- nav: hide the install CTA on mobile (brand + lang fit; hero has the CTA) ---------- */
@media (max-width: 719px) { .nav-cta { display: none; } }

/* ---------- hero: two-column with the official product image ---------- */
.hero-split { display: grid; gap: 30px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 920px) { .hero-split { grid-template-columns: 1.08fr 0.92fr; gap: 44px; } }
.hero-copy { min-width: 0; }
.hero-visual { position: relative; }
.hero-visual img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  border: 1px solid rgba(47,230,160,.28);
  box-shadow: 0 40px 90px -45px rgba(47,230,160,.55), 0 0 0 1px rgba(0,0,0,.4);
  animation: floaty 7s ease-in-out infinite;
}
.hero-visual::before {
  content: ''; position: absolute; inset: -14% -8%; z-index: -1; border-radius: 30px;
  background: radial-gradient(60% 60% at 70% 30%, rgba(47,230,160,.22), transparent 70%),
              radial-gradient(50% 50% at 20% 80%, rgba(255,210,63,.16), transparent 70%);
  filter: blur(8px);
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hero-visual img { animation: none; } }

/* ---------- logo strip (works-with marquee) ---------- */
.logos { margin-top: 40px; }
.logos-label { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); opacity: .55; text-align: center; margin-bottom: 16px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 56px; align-items: center; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee img { height: 28px; width: auto; opacity: .5; filter: grayscale(1) brightness(1.8); transition: opacity .2s, filter .2s, transform .2s; }
.marquee img:hover { opacity: 1; filter: none; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; } }

/* ---------- animated loop ring ---------- */
.ring-wrap { display: grid; gap: 36px; align-items: center; grid-template-columns: 1fr; margin-top: 36px; }
@media (min-width: 900px) { .ring-wrap { grid-template-columns: 420px 1fr; gap: 48px; } }
.ring { width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 1; display: block; }
.ring .orbit { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ring .orbit-glow { fill: none; stroke: url(#ringgrad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 70 1100; filter: drop-shadow(0 0 6px rgba(47,230,160,.7)); animation: orbit-dash 6s linear infinite; }
@keyframes orbit-dash { to { stroke-dashoffset: -1170; } }
.ring .node { fill: var(--panel-2); stroke: rgba(47,230,160,.45); stroke-width: 1.5; }
.ring .node-num { fill: var(--acc); font-family: var(--mono); font-size: 13px; font-weight: 700; text-anchor: middle; }
.ring .node-lbl { fill: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-anchor: middle; }
.ring .hub { fill: rgba(47,230,160,.08); stroke: var(--acc); stroke-width: 1.5; }
.ring .hub-t { fill: #fff; font-family: var(--mono); font-weight: 700; text-anchor: middle; }
.ring .hub-s { fill: var(--acc); font-family: var(--mono); font-size: 10px; text-anchor: middle; }
.ring .runner { fill: var(--acc-2); filter: drop-shadow(0 0 8px var(--acc-2)); }
.ring-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.ring-steps .rs { display: flex; gap: 10px; align-items: baseline; font-size: .9rem; }
.ring-steps .rs b { color: var(--acc); font-family: var(--mono); font-size: .8rem; }
.ring-steps .rs span { color: var(--mut); opacity: .85; }

/* ---------- runtimes table: scroll horizontally instead of clipping ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; }
.table-scroll .compare-table { margin: 0; }
.compare-table td:first-child { white-space: nowrap; }
.rt-name { display: inline-flex; align-items: center; gap: 9px; }
.rt-logo { height: 17px; width: 17px; object-fit: contain; opacity: .85; flex: none; }

/* ---------- logos inside source-adapter cards ---------- */
.src-logos { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; height: 26px; }
.src-logos img { height: 22px; width: auto; opacity: .8; filter: grayscale(1) brightness(1.7); transition: opacity .2s, filter .2s; }
.card:hover .src-logos img { opacity: 1; filter: none; }

/* ---------- pipeline (demand → deliver → watcher) ---------- */
.pipe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; align-items: stretch; }
.pipe .step { flex: 1; min-width: 132px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px 14px; position: relative; transition: border-color .15s, transform .15s; }
.pipe .step:hover { border-color: rgba(47,230,160,.45); transform: translateY(-3px); }
.pipe .step .n { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--acc); text-transform: uppercase; }
.pipe .step h4 { font-size: .96rem; margin: 6px 0 4px; }
.pipe .step p { color: var(--mut); opacity: .82; font-size: .8rem; line-height: 1.5; }
.pipe .step.gate { border-color: rgba(255,210,63,.4); }
.pipe .step.gate .n { color: var(--gold); }
.pipe .step.watch { border-color: rgba(47,230,160,.5); background: linear-gradient(120deg, rgba(47,230,160,.08), transparent); }

/* ---------- llm chips row ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: var(--panel); font-size: .85rem; transition: border-color .15s; }
.chip:hover { border-color: rgba(47,230,160,.45); }
.chip img { height: 16px; width: 16px; opacity: .9; }

/* ---------- readability veil ----------
   A fixed black overlay sitting ABOVE the animated green background <canvas>
   (position:fixed; z-index:-1) and BELOW all page content (z-index:auto/0), so
   the bright topographic green no longer washes out the text. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: -1;
  pointer-events: none;
}