/* Inner banner for Services & Solutions and Engagement Models pages (from the I-Vintage Service Pages reference).
   Scoped under .sv-hero so it doesn't clash with site.css (.eyebrow, .lead, keyframes). */
.sv-hero {
  --sv-red: #e5303c;
  position: relative; overflow: hidden; color: #f2f2f4;
  background:
    radial-gradient(circle at 78% 32%, rgba(229, 48, 60, 0.32), transparent 42%),
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.06), transparent 40%),
    linear-gradient(180deg, #0c0c0e 0%, #17171a 70%, #2c2c30 100%);
  padding: calc(var(--header-h) + 96px) 0 150px;
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
.sv-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 70%);
}
.sv-hero .sv-wrap { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; align-items: center; }
.sv-hero .sv-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sv-red); }
.sv-hero h1 { margin: 18px 0 0; color: #fff; font-size: clamp(38px, 5.6vw, 66px); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.sv-hero h1 .red { display: block; color: var(--sv-red); }
.sv-hero .sv-lead { margin: 26px 0 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: #dcdce0; max-width: 34em; }

.sv-hero .hero-art { position: relative; justify-self: center; width: min(100%, 380px); aspect-ratio: 1; container-type: inline-size; --orbit: 40s; }
.sv-hero .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); }
.sv-hero .ring.r2 { inset: 14%; border-color: rgba(229, 48, 60, 0.45); border-style: dashed; animation: sv-spin 60s linear infinite; }
.sv-hero .core {
  position: absolute; inset: 28%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(229,48,60,0.35), rgba(229,48,60,0.05) 70%);
  border: 1px solid rgba(255,255,255,0.18);
}
.sv-hero .core svg { width: 58%; height: 58%; color: #fff; }
.sv-hero .chip {
  position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: rgba(20,20,22,0.82); border: 1px solid rgba(255,255,255,0.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 12px; font-weight: 600; color: #f2f2f4; white-space: nowrap;
}
.sv-hero .chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--sv-red); }

/* Orbiting titles: the whole orbit turns while each chip counter-turns to stay upright */
.sv-hero .orbit { position: absolute; inset: 0; animation: sv-spin var(--orbit) linear infinite; }
.sv-hero .orbit .arm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-46cqw); }
.sv-hero .orbit .chip { left: 0; top: 0; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); animation: sv-counter var(--orbit) linear infinite; }
.sv-hero .hero-art:hover .orbit, .sv-hero .hero-art:hover .orbit .chip { animation-play-state: paused; }

/* Animated icons in the core */
.sv-hero .anim-icon * { transform-box: fill-box; }
.sv-hero .anim-icon .hot { color: var(--sv-red); stroke: var(--sv-red); }
.sv-hero .anim-icon .rise { animation: sv-rise 2.4s ease-out infinite; opacity: 0; }
.sv-hero .anim-icon .rise.d2 { animation-delay: 1.2s; }
.sv-hero .anim-icon .trace { stroke-width: 2.6; stroke-dasharray: 18 82; animation: sv-trace 3s linear infinite; }
.sv-hero .anim-icon .draw { stroke-dasharray: 100; animation: sv-draw 4s ease-in-out infinite; }
.sv-hero .anim-icon .draw.d2 { animation-name: sv-draw2; }
.sv-hero .anim-icon .glow { animation: sv-glow 2s ease-in-out infinite; }
.sv-hero .anim-icon .pin { animation: sv-pin 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.2s); opacity: 0.35; }
.sv-hero .anim-icon .bar { transform-origin: bottom; animation: sv-bar 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.15s); }
.sv-hero .anim-icon .layer { animation: sv-layer 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.35s); }
.sv-hero .anim-icon .flow { stroke-dasharray: 3 5; animation: sv-flow 1s linear infinite; }
.sv-hero .anim-icon .needle { transform-origin: 50% 50%; transform-box: view-box; animation: sv-needle 4s ease-in-out infinite; }
.sv-hero .anim-icon .join { animation: sv-join 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.5s); }
.sv-hero .anim-icon .orbit-ring { transform-box: view-box; transform-origin: 50% 50%; animation: sv-spin 9s linear infinite; }
.sv-hero .anim-icon .slide-in { animation: sv-slideIn 3.2s ease-in-out infinite; }
.sv-hero .anim-icon .glow-stroke { animation: sv-pin 1.6s ease-in-out infinite; }
.sv-hero .anim-icon .carry { animation: sv-carry 3s ease-in-out infinite; }
.sv-hero .anim-icon .spin-globe { transform-box: view-box; transform-origin: 50% 50%; animation: sv-globe 4s ease-in-out infinite; }
.sv-hero .anim-icon .ping { animation: sv-ping 2s ease-out infinite; transform-origin: center; }
.sv-hero .anim-icon .ping.d2 { animation-delay: 1s; }

@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-counter {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
  to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); }
}
@keyframes sv-rise { 0% { transform: translateY(4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
@keyframes sv-trace { to { stroke-dashoffset: -100; } }
@keyframes sv-draw { 0% { stroke-dashoffset: 100; } 35%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sv-draw2 { 0%, 30% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sv-glow { 50% { fill: #e5303c; fill-opacity: 0.5; } }
@keyframes sv-pin { 0%, 100% { opacity: 0.35; stroke: currentColor; } 15% { opacity: 1; stroke: #e5303c; } }
@keyframes sv-bar { 0% { transform: scaleY(0.15); } 40%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0.15); } }
@keyframes sv-layer { 0%, 100% { stroke: currentColor; } 20% { stroke: #e5303c; } }
@keyframes sv-flow { to { stroke-dashoffset: -8; } }
@keyframes sv-needle { 0% { transform: rotate(0); } 20% { transform: rotate(70deg); } 35% { transform: rotate(-30deg); } 50%, 100% { transform: rotate(0); } }
@keyframes sv-join { 0% { opacity: 0; transform: translateX(-4px); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sv-slideIn { 0% { transform: translateX(8px); opacity: 0; } 25%, 80% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes sv-carry {
  0% { transform: translate(-14px, 18px); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(0, 0); }
  85% { opacity: 1; }
  100% { transform: translate(14px, 18px); opacity: 0; }
}
@keyframes sv-globe { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.2); } }
@keyframes sv-ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

@media (max-width: 920px) {
  .sv-hero .sv-wrap { grid-template-columns: minmax(0, 1fr); }
  .sv-hero .hero-art { display: none; }
}
@media (max-width: 600px) {
  .sv-hero { padding: calc(var(--header-h) + 64px) 0 110px; }
  .sv-hero .sv-wrap { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-hero *, .sv-hero *::before, .sv-hero *::after { animation: none !important; }
}