/* Hero split layout + animated multi-business visual */
.supoth-hero{
  min-height:min(92vh,720px);
  padding:3.5rem 0 3rem;
}

.supoth-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(320px,1.05fr);
  gap:2.5rem 3rem;
  align-items:center;
}

.supoth-hero-content{max-width:640px}

.supoth-hero-visual{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.supoth-hero-photo-frame{
  position:relative;
  width:min(100%,480px);
  margin:0 auto;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(34,211,166,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);
  animation:heroPhotoFloat 6s ease-in-out infinite;
}

[data-theme="light"] .supoth-hero-photo-frame{
  box-shadow:0 20px 50px rgba(15,23,42,.12),0 0 0 1px var(--border);
}

.supoth-hero-photo{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center top;
  background:linear-gradient(180deg,#f8fafc,#e2e8f0);
}

.supoth-hero-photo-shine{
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.25) 50%,transparent 60%);
  transform:translateX(-120%);
  animation:heroShine 5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes heroPhotoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

@keyframes heroShine{
  0%,100%{transform:translateX(-120%)}
  45%,55%{transform:translateX(120%)}
}

/* Orbiting business badges */
.supoth-hero-orbit{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.supoth-hero-orbit-item{
  position:absolute;
  left:50%;
  top:50%;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.4rem .7rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  font-style:normal;
  white-space:nowrap;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  animation:heroOrbit 22s linear infinite;
  animation-delay:calc(var(--orbit-i) * -3.6s);
  transform:rotate(calc(var(--orbit-i) * 60deg)) translateX(min(42vw,200px)) rotate(calc(var(--orbit-i) * -60deg));
}

.supoth-hero-orbit-item i{color:var(--accent);font-size:.85rem}

@keyframes heroOrbit{
  from{transform:rotate(0deg) translateX(min(42vw,200px)) rotate(0deg)}
  to{transform:rotate(360deg) translateX(min(42vw,200px)) rotate(-360deg)}
}

/* Floating dashboard cards */
.supoth-hero-dash{
  position:absolute;
  z-index:3;
  min-width:140px;
  padding:.65rem .85rem;
  border-radius:12px;
  background:rgba(21,28,38,.92);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  animation:heroDashFloat 4s ease-in-out infinite;
}

[data-theme="light"] .supoth-hero-dash{
  background:rgba(255,255,255,.95);
}

.supoth-hero-dash-label{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.72rem;
  color:var(--muted);
  margin-bottom:.25rem;
}

.supoth-hero-dash-label i{color:var(--accent)}

.supoth-hero-dash strong{
  display:block;
  font-size:1rem;
  color:var(--text);
  line-height:1.2;
}

.supoth-hero-dash-bar{
  display:block;
  height:5px;
  margin-top:.45rem;
  border-radius:999px;
  background:var(--border);
  overflow:hidden;
}

.supoth-hero-dash-bar i{
  display:block;
  height:100%;
  width:var(--w,60%);
  border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),#38bdf8);
  animation:heroBarGrow 2.5s ease-in-out infinite alternate;
}

@keyframes heroBarGrow{
  from{width:calc(var(--w,60%) - 12%)}
  to{width:var(--w,60%)}
}

.supoth-hero-dash-pill{
  display:inline-block;
  margin-top:.35rem;
  font-size:.68rem;
  font-weight:700;
  padding:.15rem .45rem;
  border-radius:6px;
  background:rgba(56,189,248,.15);
  color:var(--accent2);
}

.supoth-hero-dash-pill.ok{
  background:rgba(34,211,166,.15);
  color:var(--accent);
}

.supoth-hero-dash--sales{
  top:8%;
  right:0;
  animation-delay:0s;
}

.supoth-hero-dash--stock{
  bottom:18%;
  left:-2%;
  animation-delay:1.2s;
}

.supoth-hero-dash--invoice{
  top:42%;
  right:-4%;
  animation-delay:.6s;
}

@keyframes heroDashFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@media (max-width:960px){
  .supoth-hero-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .supoth-hero-visual{
    order:-1;
    min-height:340px;
  }
  .supoth-hero-orbit-item{
    transform:rotate(calc(var(--orbit-i) * 60deg)) translateX(150px) rotate(calc(var(--orbit-i) * -60deg));
  }
  @keyframes heroOrbit{
    from{transform:rotate(0deg) translateX(150px) rotate(0deg)}
    to{transform:rotate(360deg) translateX(150px) rotate(-360deg)}
  }
  .supoth-hero-dash--sales{right:4%;top:4%}
  .supoth-hero-dash--stock{left:4%}
  .supoth-hero-dash--invoice{right:2%}
}

@media (max-width:560px){
  .supoth-hero-orbit{display:none}
  .supoth-hero-dash{display:none}
  .supoth-hero-visual{min-height:auto}
}