/* index.css: homepage-only styles for the animated orbit hero
   (user-approved 2026-07-06: light Ops Desk take on the orbit-hero reference;
   gradients appear ONLY as hairline ring borders + the rotating CTA border, never as surfaces). */

/* ---------- dark hero band (flat deep-indigo; Daniel 2026-07-06 wanted a dark hero like the
   Marketeam reference but we stay FLAT indigo, NOT a purple gradient, so it can't collide with
   LogiSuite's gradient signature, so the anti-clone gate stays intact) ---------- */
.hero-dark{ background:var(--indigo); color:#fff; }
.hero-dark .display{ color:#fff; }
.hero-dark .text-muted{ color:rgba(255,255,255,.72); }
.hero-dark .core__label{ color:#fff; }
.hero-dark .mock-tag{ background:transparent; color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.3); }

/* ---------- hero partner ticker (infinite scroll, MOCK logos) ---------- */
.hero-ticker__cap{
  display:flex; align-items:center; gap:.625rem;
  font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.05em;
  color:rgba(255,255,255,.6);
}
.hero-ticker{
  margin-top:1.25rem; overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.hero-ticker__inner{ display:flex; width:max-content; animation:tickerScroll 32s linear infinite; }
.hero-ticker__group{ display:flex; align-items:center; gap:3.5rem; padding-right:3.5rem; }
.hero-ticker__item{
  font-family:var(--font-display); font-weight:700; font-size:1.25rem;
  letter-spacing:-.01em; color:rgba(255,255,255,.5); white-space:nowrap;
}
@keyframes tickerScroll{ to{ transform:translateX(-50%); } }

/* ---------- orbit visualization ---------- */
.hero-viz{
  --s:1; /* scale factor per breakpoint */
  position:relative;
  width:calc(640px * var(--s));
  height:calc(640px * var(--s));
  margin-inline:auto;
}
.orbit{
  position:absolute; inset:0; margin:auto;
  border-radius:50%;
}
/* the ring itself lives on a pseudo-element so its mask can't swallow the avatars */
.orbit::before{
  content:""; position:absolute; inset:0;
  border-radius:50%;
  padding:1px;
  background:linear-gradient(180deg, rgba(139,92,246,0) 0%, rgba(139,92,246,.85) 43%, rgba(139,92,246,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.orbit--1{ width:calc(296px * var(--s)); height:calc(296px * var(--s)); animation:orbitL 30s linear infinite; }
.orbit--2{ width:calc(428px * var(--s)); height:calc(428px * var(--s)); animation:orbitR 40s linear infinite; }
.orbit--3{ width:calc(536px * var(--s)); height:calc(536px * var(--s)); animation:orbitR 50s linear infinite; }
.orbit--4{ width:calc(640px * var(--s)); height:calc(640px * var(--s)); animation:orbitL 60s linear infinite; }
@keyframes orbitL{ to{ transform:rotate(-360deg); } }
@keyframes orbitR{ to{ transform:rotate(360deg); } }

/* satellite = avatar pinned on a ring; --a angle, --r radius */
.sat{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(var(--a)) translate(calc(var(--r) * var(--s))) rotate(calc(var(--a) * -1));
}
.sat-in{ display:block; animation:satIn .7s var(--ease-out) both; }
.sat img{
  display:block;
  width:calc(var(--d,56px) * var(--s));
  height:calc(var(--d,56px) * var(--s));
  object-fit:cover;
  border:1px solid var(--line-strong);
  background:var(--bg);
}
.sat--round img{ border-radius:50%; }
.sat--tile img{ border-radius:calc(14px * var(--s)); }
/* soft brand glows (decorative, flat-friendly) */
/* centered glow (0 0), not an offset drop-shadow, so it reads as "lit" on the dark hero and not as elevation (keeps the flat system) */
.sat--glow-violet img{ box-shadow:0 0 0 4px rgba(139,92,246,.14), 0 0 20px rgba(139,92,246,.3); }
.sat--glow-pink img{ box-shadow:0 0 0 4px rgba(255,60,157,.14), 0 0 20px rgba(255,60,157,.3); }
.sat--glow-coral img{ box-shadow:0 0 0 4px rgba(255,107,107,.16), 0 0 20px rgba(255,107,107,.32); }
/* keep avatars upright: counter-rotate against the parent ring */
.orbit--1 .sat img{ animation:orbitR 30s linear infinite; }
.orbit--2 .sat img{ animation:orbitL 40s linear infinite; }
.orbit--3 .sat img{ animation:orbitL 50s linear infinite; }
.orbit--4 .sat img{ animation:orbitR 60s linear infinite; }
@keyframes satIn{
  from{ opacity:0; transform:scale(.3) rotate(-180deg); filter:blur(6px); }
  to{ opacity:1; transform:scale(1) rotate(0deg); filter:blur(0); }
}

/* center counter (not inside a spinning ring, stays upright by construction) */
.core{
  position:absolute; inset:0; margin:auto;
  width:calc(280px * var(--s)); height:calc(280px * var(--s));
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.core__num{
  font-family:var(--font-mono); font-weight:500;
  font-size:calc(3.5rem * var(--s));
  color:var(--pink); line-height:1;
}
.core__label{ margin-top:.5rem; font-weight:600; font-size:calc(1rem * var(--s)); color:var(--ink); }

/* ---------- typewriter ---------- */
.type-caret{
  display:inline-block; width:3px; height:.9em;
  background:var(--pink); vertical-align:-.08em; margin-left:2px;
  animation:caretBlink .8s steps(1) infinite;
}
.type-caret.is-done{ display:none; }
@keyframes caretBlink{ 50%{ opacity:0; } }

/* (removed the rotating conic-gradient CTA border: it was a UI gradient + perpetual motion, both off the
   near-static flat direction. The hero primary CTA now uses .btn--inverse, matching every other indigo band.) */

/* ---------- process tracking rail (shipment-milestone treatment, user-approved 2026-07-06) ----------
   Vertical rail + numbered square nodes; the pink line draws with scroll (index.js sets --p, transform only).
   ?revealall / reduced-motion render the rail fully drawn. */
.track{ position:relative; list-style:none; margin:0; padding:0; }
.track__line,.track__line-fill{
  position:absolute; top:8px; bottom:8px; left:16px; width:1px;
}
.track__line{ background:var(--line-strong); }
.track__line-fill{
  width:2px; margin-left:-.5px;
  background:var(--pink);
  transform-origin:top; transform:scaleY(var(--p,0));
}
.track__step{
  position:relative;
  padding:1.375rem 0 1.375rem 3.5rem;
}
.track__step:first-child{ padding-top:0; }
.track__step:last-child{ padding-bottom:0; }
.track__node{
  position:absolute; left:0; top:.25rem;
  display:flex; align-items:center; justify-content:center;
  width:33px; height:33px;
  font-family:var(--font-mono); font-size:.75rem; font-weight:500; letter-spacing:.04em;
  background:var(--bg); color:var(--muted);
  border:1px solid var(--line-strong); border-radius:var(--radius-ctl);
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out),border-color .2s var(--ease-out);
}
.track__step:first-child .track__node{ top:0; }
/* stop both rail lines at the last node (cover their tail with page background) */
.track__step:last-child::after{
  content:""; position:absolute;
  left:13px; width:8px; top:calc(.25rem + 34px); bottom:0;
  background:var(--bg);
}
.track__step.is-past .track__node{ background:var(--pink); color:var(--ink); border-color:var(--ink); }
.track__ghost{
  position:absolute; right:0; top:.25rem;
  display:none;
  font-family:var(--font-mono); font-weight:500; font-size:clamp(3rem,4.5vw,4.25rem); line-height:1;
  color:var(--line); letter-spacing:-.02em;
  user-select:none;
}
@media (min-width:1024px){ .track__ghost{ display:block; } .track__step{ padding-right:7rem; } }
.track__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  margin-bottom:.375rem;
}
.track__tag{
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line-strong); border-radius:var(--radius-ctl);
  padding:.125rem .5rem;
}
.track__tag--client{
  color:var(--ink); border-color:var(--pink);
  background:rgba(255,60,157,.08);
}
.track__time{
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.track__time::before{ content:"· "; color:var(--line-strong); }

/* comparison table duel treatment (.spec--duel) + verdict icons (.spec__ic) moved to base.css
   so both the homepage teaser and the vi-sao full table can share them (vi-sao only loads base.css). */

/* ---------- testimonials: editorial pull-quote + extracted mono stat (user-approved 2026-07-06) ---------- */
.quote-lead{ position:relative; padding-top:3.25rem; }
.quote-lead::before{
  content:"\201C";
  position:absolute; top:-.375rem; left:-.04em;
  font-family:var(--font-display); font-weight:700;
  font-size:5.5rem; line-height:1; color:var(--pink);
  pointer-events:none;
}
.quote-lead__text{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.375rem,2.2vw,1.75rem);
  line-height:1.4; letter-spacing:-0.015em;
  max-width:24em;
}
.quote-lead__stat{
  margin-top:1.5rem;
  font-family:var(--font-mono); font-weight:500;
  font-size:clamp(1.5rem,2.2vw,1.75rem); line-height:1.2;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--pink);
}
.quote-lead__stat span[aria-hidden]{ color:var(--ink); }
.quote-side{
  border-left:1px solid var(--line-strong);
  padding-left:1.5rem;
}
@media (min-width:1024px){ .quote-side{ margin-top:3.25rem; } }

/* entrance for the whole viz */
.hero-viz{ animation:vizIn 1.2s var(--ease-out) both; animation-delay:.3s; }
@keyframes vizIn{ from{ opacity:0; transform:scale(.88); } to{ opacity:1; transform:scale(1); } }

/* responsive scale */
@media (max-width:1280px){ .hero-viz{ --s:.85; } }
@media (max-width:1024px){ .hero-viz{ --s:.72; } }
@media (max-width:640px){ .hero-viz{ --s:.52; } }

/* reduced motion / no-JS: base.css already kills animations; keep everything visible */
@media (prefers-reduced-motion: reduce){
  .sat-in, .hero-viz{ opacity:1 !important; transform:none !important; filter:none !important; }
}