/* Homepage hero: premium rotating PVA service orbit */
.home-hero {
  isolation: isolate;
  padding: 148px 0 96px;
  background:
    radial-gradient(circle at 18% 16%, rgba(14, 165, 233, .32), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(139, 92, 246, .34), transparent 34%),
    radial-gradient(circle at 55% 92%, rgba(34, 197, 94, .16), transparent 34%),
    linear-gradient(135deg, #020617 0%, #07111f 44%, #111827 100%);
}

.home-hero::before {
  z-index: 0;
  opacity: .85;
  background-image:
    linear-gradient(rgba(125, 211, 252, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, .06) 1px, transparent 1px);
  background-size: 52px 52px;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 34%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 22%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 72%, rgba(103,232,249,.22) 0 1px, transparent 2px);
  background-size: 210px 210px, 260px 260px, 310px 310px;
  animation: heroStars 18s linear infinite;
}

.home-hero-orb { z-index: 0; filter: blur(34px); mix-blend-mode: screen; }
.home-hero-orb-one { width: 330px; height: 330px; left: -115px; bottom: 22px; background: rgba(20,184,166,.34); }
.home-hero-orb-two { width: 430px; height: 430px; right: -160px; top: 74px; background: rgba(99,102,241,.35); }

/* Grid: left content | right orbit — orbit column is capped so it never bleeds */
.home-hero-grid { gap: 48px; }
@media (min-width: 1024px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; }
}

.home-hero-content { position: relative; z-index: 3; }
.home-eyebrow {
  border-color: rgba(125,211,252,.28);
  background: rgba(15,23,42,.52);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 42px rgba(2,6,23,.26);
  backdrop-filter: blur(16px);
}
.home-hero-title { max-width: 780px; margin: 24px 0 22px; font-size: clamp(40px, 5.8vw, 76px); letter-spacing: -.075em; text-wrap: balance; }
.home-hero-copy { max-width: 690px; color: #dbeafe; }
.home-hero-proof div {
  position: relative;
  overflow: hidden;
  border-color: rgba(148,163,184,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
  backdrop-filter: blur(18px);
}
.home-hero-proof div::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, #5eead4, #38bdf8, #a78bfa); }

/* ── Orbit visual column ── */
.home-hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Constrain height to the hero section — no overflow */
  min-height: 0;
  overflow: visible;
}

.home-orbit-scene {
  /* Size relative to its column width so it never overflows horizontally,
     and capped so it never taller than the viewport minus header */
  --orbit-size: min(480px, 44vw, calc(100vh - 260px));
  --orbit-radius-one: calc(var(--orbit-size) * .41);
  --orbit-radius-two: calc(var(--orbit-size) * .31);
  position: relative;
  width: var(--orbit-size);
  height: var(--orbit-size);
  transform-style: preserve-3d;
  animation: sceneFloat 7s ease-in-out infinite;
  flex-shrink: 0;
}

.home-orbit-scene::before,
.home-orbit-scene::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; }
.home-orbit-scene::before {
  inset: 7%;
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.015)), radial-gradient(circle at 50% 50%, rgba(56,189,248,.16), transparent 58%);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: inset 0 0 80px rgba(56,189,248,.08), 0 42px 110px rgba(2,6,23,.52);
}
.home-orbit-scene::after { left: 11%; right: 11%; bottom: 3%; height: 24px; background: radial-gradient(ellipse, rgba(2,6,23,.68), transparent 72%); filter: blur(10px); transform: rotateX(72deg); }

.home-orbit-glow {
  position: absolute;
  inset: 18%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(94,234,212,.24), transparent 54%), conic-gradient(from 160deg, rgba(56,189,248,.06), rgba(167,139,250,.22), rgba(34,197,94,.12), rgba(56,189,248,.06));
  filter: blur(6px);
  animation: pulseGlow 4.5s ease-in-out infinite;
}

.home-orbit-ring { position: absolute; left: 50%; top: 50%; border-radius: 999px; transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-12deg); pointer-events: none; }
.home-orbit-ring-one { width: 96%; height: 96%; border: 1px solid rgba(125,211,252,.24); box-shadow: 0 0 42px rgba(14,165,233,.1), inset 0 0 38px rgba(125,211,252,.06); }
.home-orbit-ring-two { width: 74%; height: 74%; border: 1px dashed rgba(167,139,250,.28); animation: ringDrift 16s linear infinite reverse; }
.home-orbit-ring-three { width: 52%; height: 52%; border: 1px solid rgba(94,234,212,.18); box-shadow: inset 0 0 34px rgba(94,234,212,.08); }

.home-orbit-core {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(240px, 42vw);
  min-height: 220px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(226,232,240,.16);
  border-radius: 30px;
  background: radial-gradient(circle at 50% 0%, rgba(125,211,252,.18), transparent 40%), linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.8));
  box-shadow: 0 34px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(22px);
  transform: translate(-50%, -50%);
}
.home-orbit-core-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 18px; color: #020617; background: linear-gradient(135deg, #5eead4, #38bdf8 54%, #a78bfa); font-size: 26px; font-weight: 900; box-shadow: 0 14px 36px rgba(56,189,248,.28); }
.home-orbit-core span { color: #67e8f9; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.home-orbit-core h3 { margin: 7px 0 8px; color: #fff; font-size: clamp(18px, 2.2vw, 26px); letter-spacing: -.05em; }
.home-orbit-core p { color: #cbd5e1; font-size: 12px; line-height: 1.6; }

.home-orbit-track { position: absolute; z-index: 7; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; animation: orbitSpin var(--spin-duration, 24s) linear infinite; }
.home-orbit-track-one { --orbit-radius: var(--orbit-radius-one); --spin-duration: 26s; }
.home-orbit-track-two { --orbit-radius: var(--orbit-radius-two); --spin-duration: 20s; animation-direction: reverse; }
.home-orbit-item { position: absolute; left: 0; top: 0; transform: rotate(var(--angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--angle))); transform-origin: 0 0; }

.home-orbit-card {
  position: relative;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  overflow: hidden;
  border-radius: 999px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset -12px -14px 20px rgba(2,6,23,.32), inset 8px 8px 16px rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.34);
  transform-style: preserve-3d;
  animation: cardCounterSpin var(--spin-duration, 24s) linear infinite, coinBob 4.8s ease-in-out infinite;
  text-decoration: none;
}
.home-orbit-track-two .home-orbit-card { animation-direction: reverse, normal; }
.home-orbit-card::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 42%); }
.home-orbit-card span,
.home-orbit-card strong { position: relative; z-index: 1; }
.home-orbit-card span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: rgba(2,6,23,.24); font-size: 20px; font-weight: 950; }
.home-orbit-card strong { font-size: 10px; font-weight: 900; letter-spacing: .04em; text-shadow: 0 2px 10px rgba(0,0,0,.34); }
.home-orbit-card.gmail  { background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(255,255,255,.08) 15%, transparent 30%), linear-gradient(135deg, #2563eb, #ef4444 52%, #f59e0b); }
.home-orbit-card.yahoo  { background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(255,255,255,.08) 15%, transparent 30%), linear-gradient(135deg, #7c3aed, #a855f7 52%, #ec4899); }
.home-orbit-card.outlook{ background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(255,255,255,.08) 15%, transparent 30%), linear-gradient(135deg, #0284c7, #38bdf8 54%, #2563eb); }
.home-orbit-card.icloud { background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(255,255,255,.08) 15%, transparent 30%), linear-gradient(135deg, #60a5fa, #c084fc 54%, #f0abfc); }
.home-orbit-card.gmx    { background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(255,255,255,.08) 15%, transparent 30%), linear-gradient(135deg, #0f766e, #22c55e 54%, #84cc16); }
.home-orbit-card.youtube{ background: radial-gradient(circle at 34% 24%, rgba(255,255,255,.92), rgba(255,255,255,.08) 15%, transparent 30%), linear-gradient(135deg, #991b1b, #ef4444 56%, #f97316); }

.home-orbit-badge { position: absolute; z-index: 9; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba(226,232,240,.18); border-radius: 999px; color: #dbeafe; background: rgba(15,23,42,.72); box-shadow: 0 16px 44px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.09); backdrop-filter: blur(18px); font-size: 12px; font-weight: 800; white-space: nowrap; }
.home-orbit-badge span { color: #5eead4; }
.home-orbit-badge-top    { right: 2%; top: 10%; animation: badgeFloat 5s ease-in-out infinite; }
.home-orbit-badge-bottom { left: 2%; bottom: 12%; animation: badgeFloat 5.4s ease-in-out infinite reverse; }

/* ── Keyframes ── */
@keyframes orbitSpin       { to { transform: rotate(360deg); } }
@keyframes cardCounterSpin { to { rotate: -360deg; } }
@keyframes sceneFloat      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px) rotateX(2deg) rotateY(-2deg); } }
@keyframes coinBob         { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes pulseGlow       { 0%,100% { opacity: .72; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes ringDrift       { to { transform: translate(-50%, -50%) rotateX(62deg) rotateZ(348deg); } }
@keyframes badgeFloat      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes heroStars       { to { background-position: 210px 210px, -260px 260px, 310px -310px; } }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .home-orbit-scene { --orbit-size: min(420px, 42vw, calc(100vh - 240px)); }
}

@media (max-width: 1023px) {
  /* Stacked on mobile — orbit goes below content, uses full width capped at 420px */
  .home-hero { padding: 120px 0 72px; }
  .home-hero-visual { margin-top: 8px; }
  .home-orbit-scene {
    --orbit-size: min(420px, 88vw);
    --orbit-radius-one: calc(var(--orbit-size) * .41);
    --orbit-radius-two: calc(var(--orbit-size) * .31);
  }
}

@media (max-width: 760px) {
  .home-hero { padding: 110px 0 60px; }
  .home-hero-title { font-size: clamp(36px, 11vw, 52px); letter-spacing: -.06em; }
  .home-hero-actions .btn { width: 100%; }
  .home-hero-proof { grid-template-columns: 1fr; }
  .home-orbit-scene {
    --orbit-size: min(370px, 90vw);
    --orbit-radius-one: calc(var(--orbit-size) * .39);
    --orbit-radius-two: calc(var(--orbit-size) * .28);
  }
  .home-orbit-core { width: min(210px, 52vw); min-height: 200px; padding: 20px 16px; }
  .home-orbit-core-icon { width: 46px; height: 46px; font-size: 20px; }
  .home-orbit-core h3 { font-size: 16px; }
  .home-orbit-card { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .home-orbit-card span { width: 30px; height: 30px; font-size: 15px; }
  .home-orbit-card strong { font-size: 9px; }
  .home-orbit-badge { padding: 8px 11px; font-size: 10px; }
  .home-orbit-badge-top    { right: 0; top: 6%; }
  .home-orbit-badge-bottom { left: 0; bottom: 8%; }
}

@media (max-width: 420px) {
  .home-orbit-scene { --orbit-size: min(330px, 92vw); }
}

@media (prefers-reduced-motion: reduce) {
  .home-orbit-scene,
  .home-orbit-track,
  .home-orbit-card,
  .home-orbit-glow,
  .home-orbit-ring-two,
  .home-orbit-badge,
  .home-hero::after { animation: none !important; }
}