/* Phone mockup hero — theme accent ring */
.supoth-hero-phone-scene{
  position:relative;
  min-height:440px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.supoth-hero-ring{
  position:absolute;
  width:min(100%,400px);
  aspect-ratio:1;
  border-radius:50%;
  border:3px solid rgba(34,211,166,.35);
  background:radial-gradient(circle,rgba(34,211,166,.18) 0%,transparent 68%);
  animation:ringPulse 5s ease-in-out infinite;
}

@keyframes ringPulse{
  0%,100%{transform:scale(1);opacity:.9}
  50%{transform:scale(1.04);opacity:1}
}

.supoth-phone-mock{
  position:relative;
  z-index:2;
  width:min(100%,260px);
  transform:rotate(-6deg);
  animation:phoneTilt 7s ease-in-out infinite;
}

@keyframes phoneTilt{
  0%,100%{transform:rotate(-6deg) translateY(0)}
  50%{transform:rotate(-4deg) translateY(-12px)}
}

.supoth-phone-bezel{
  background:#1a1f28;
  border-radius:32px;
  padding:10px;
  box-shadow:0 28px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);
}

[data-theme="light"] .supoth-phone-bezel{
  background:#0f172a;
}

.supoth-phone-notch{
  width:80px;height:22px;
  margin:0 auto 8px;
  background:#0b0f14;
  border-radius:0 0 14px 14px;
}

.supoth-phone-screen{
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
  border-radius:22px;
  padding:12px 10px 16px;
  min-height:340px;
}

.supoth-phone-status{
  display:flex;
  justify-content:space-between;
  font-size:.65rem;
  font-weight:700;
  color:#64748b;
  margin-bottom:10px;
  padding:0 4px;
}

.supoth-app-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.supoth-app-grid .app-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  aspect-ratio:1;
  border-radius:14px;
  font-size:.62rem;
  font-weight:700;
  color:#0f172a;
  text-align:center;
  line-height:1.2;
}

.supoth-app-grid .app-tile em{font-style:normal}

.supoth-app-grid .app-tile i{font-size:1.15rem}

.supoth-app-grid .c1{background:#dcfce7;color:#166534}
.supoth-app-grid .c2{background:#dbeafe;color:#1e40af}
.supoth-app-grid .c3{background:#ffedd5;color:#c2410c}
.supoth-app-grid .c4{background:#f3e8ff;color:#6b21a8}
.supoth-app-grid .c5{background:#fce7f3;color:#9d174d}
.supoth-app-grid .c6{background:#e0f2fe;color:#0369a1}

/* Floating chips (Hishabee-style) */
.supoth-float-chip{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem .75rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.2);
  animation:chipFloat 4.5s ease-in-out infinite;
}

.supoth-float-chip .chip-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,211,166,.15);
  color:var(--accent);
  font-size:1rem;
}

.supoth-float-chip .chip-text{
  font-size:.72rem;font-weight:700;line-height:1.25;color:var(--text);
}

.chip-stock{top:12%;left:0;animation-delay:0s}
.chip-report{top:8%;right:0;animation-delay:1s}
.chip-sales{bottom:15%;left:8%;animation-delay:.5s}

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

@media (max-width:960px){
  .supoth-hero-phone-scene{min-height:360px}
  .supoth-float-chip{display:none}
  .supoth-phone-mock{transform:rotate(-4deg)}
}

@media (max-width:560px){
  .supoth-hero-ring{width:280px}
  .supoth-phone-mock{width:220px}
}