/* Classic hero: photo left, text right (2nd reference layout) */
.supoth-hero-grid--classic{
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:1.25rem 1.5rem;
  align-items:center;
}

.supoth-hero-grid--classic .supoth-hero-visual--photo{
  order:0;
}

.supoth-hero-grid--classic .supoth-hero-content{
  order:1;
  max-width:100%;
}

.supoth-hero-visual--photo{
  position:relative;
  min-height:0!important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  overflow:visible;
}

/* Neutralize hero-visual.css photo defaults — show PNG as-is */
.supoth-hero-visual--photo .supoth-hero-photo-frame,
.supoth-hero-visual--photo .supoth-hero-photo-frame--pos{
  position:relative;
  z-index:1;
  width:100%!important;
  max-width:none!important;
  margin:0;
  padding:0;
  border:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  background-color:transparent!important;
  overflow:visible!important;
  animation:heroPhotoFloat 5.5s ease-in-out infinite;
  will-change:transform;
}

.supoth-hero-visual--photo .supoth-hero-photo,
.supoth-hero-visual--photo .supoth-hero-photo-frame--pos .supoth-hero-photo{
  display:block;
  width:100%!important;
  max-width:none!important;
  height:auto;
  margin:0;
  padding:0;
  border:none;
  background:none!important;
  background-color:transparent!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center;
  filter:none!important;
}

.supoth-hero-visual--photo .supoth-hero-photo-shine,
.supoth-hero-visual--photo .supoth-hero-pos-glow{
  display:none!important;
}

.supoth-hero-visual--photo .supoth-hero-dash{
  position:absolute;
  z-index:3;
  min-width:96px;
  padding:.34rem .48rem;
  border-radius:10px;
  background:rgba(21,28,38,.92);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  animation:heroDashFloat 5s ease-in-out infinite;
  will-change:transform;
}

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

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

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

.supoth-hero-visual--photo .supoth-hero-dash strong{
  display:block;
  font-size:.7rem;
  color:var(--text);
  line-height:1.1;
}

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

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

.supoth-hero-visual--photo .supoth-hero-dash-pill{
  display:inline-block;
  margin-top:.22rem;
  font-size:.48rem;
  font-weight:700;
  padding:.08rem .3rem;
  border-radius:5px;
  background:rgba(56,189,248,.15);
  color:var(--accent2);
}

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

.supoth-hero-visual--photo .supoth-hero-dash--sales{
  top:4%;
  left:0;
  right:auto;
  animation-delay:0s;
}

.supoth-hero-visual--photo .supoth-hero-dash--stock{
  bottom:10%;
  left:0;
  animation-delay:1.1s;
}

.supoth-hero-visual--photo .supoth-hero-dash--invoice{
  top:34%;
  left:0;
  right:auto;
  animation-delay:.55s;
}

@keyframes heroPhotoFloat{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(4px,-11px) rotate(.45deg)}
  50%{transform:translate(-3px,-16px) rotate(0deg)}
  75%{transform:translate(-5px,-8px) rotate(-.4deg)}
}

@keyframes heroDashFloat{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(2px,-6px)}
  50%{transform:translate(-1px,-9px)}
  75%{transform:translate(-2px,-4px)}
}

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

@media (max-width:960px){
  .supoth-hero-grid--classic{
    grid-template-columns:1fr;
  }
  .supoth-hero-grid--classic .supoth-hero-visual--photo{
    order:-1;
    min-height:auto;
  }
  .supoth-hero-visual--photo .supoth-hero-photo-frame--pos{
    max-width:100%;
  }
  .supoth-hero-visual--photo .supoth-hero-dash--sales{left:1%;right:auto;top:3%}
  .supoth-hero-visual--photo .supoth-hero-dash--stock{left:1%;bottom:8%}
  .supoth-hero-visual--photo .supoth-hero-dash--invoice{left:1%;right:auto;top:32%}
}

@media (prefers-reduced-motion:reduce){
  .supoth-hero-visual--photo .supoth-hero-photo-frame--pos,
  .supoth-hero-visual--photo .supoth-hero-dash{
    animation:none!important;
  }
}

@media (max-width:560px){
  .supoth-hero-visual--photo .supoth-hero-dash{display:none}
  .supoth-hero-visual--photo{min-height:auto;padding:.5rem 0}
  .supoth-hero-visual--photo .supoth-hero-photo-frame--pos{border-radius:0}
}




/* Hero CTA — two distinct light backgrounds */
body.supoth-body.page-home .supoth-hero-actions .btn-supoth-primary{
  background:linear-gradient(135deg,rgba(34,211,166,.28),rgba(20,184,166,.18));
  border:1px solid rgba(34,211,166,.5);
  color:#ecfdf5!important;
  box-shadow:0 8px 24px rgba(34,211,166,.18);
}
body.supoth-body.page-home .supoth-hero-actions .btn-supoth-primary:hover{
  background:linear-gradient(135deg,rgba(34,211,166,.38),rgba(20,184,166,.28));
  color:#fff!important;
  box-shadow:0 10px 28px rgba(34,211,166,.28);
}
body.supoth-body.page-home .supoth-hero-actions .btn-supoth-primary i{
  color:#6ee7b7!important;
}

body.supoth-body.page-home .supoth-hero-actions .btn-supoth-outline{
  background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(99,102,241,.1));
  border:1px solid rgba(56,189,248,.38);
  color:var(--text)!important;
  box-shadow:0 6px 20px rgba(56,189,248,.1);
}
body.supoth-body.page-home .supoth-hero-actions .btn-supoth-outline:hover{
  background:linear-gradient(135deg,rgba(56,189,248,.24),rgba(99,102,241,.16));
  border-color:rgba(56,189,248,.52);
  color:var(--text)!important;
}
body.supoth-body.page-home .supoth-hero-actions .btn-supoth-outline i{
  color:var(--accent2)!important;
}
body.supoth-body.page-home .supoth-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  width:100%;
  max-width:100%;
  padding:0;
  margin:.1rem 0 0;
  box-sizing:border-box;
}

body.supoth-body.page-home .supoth-hero-actions .btn-supoth-primary,
body.supoth-body.page-home .supoth-hero-actions .btn-supoth-outline{
  flex:1 1 calc(50% - .35rem);
  min-width:0;
  width:auto;
  justify-content:center;
  padding:.7rem 1.05rem;
  font-size:1rem;
  font-weight:700;
  line-height:1.25;
  min-height:50px;
  border-radius:12px;
}

@media (max-width:720px){
  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    text-align:center;
  }

  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-eyebrow{
    display:inline-flex;
    margin-left:auto;
    margin-right:auto;
    font-size:.84rem;
    padding:.32rem .78rem;
  }

  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-title{
    font-size:clamp(1.68rem,5.4vw,2rem);
    line-height:1.16;
  }

  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-sub{
    font-size:clamp(1.1rem,3.4vw,1.28rem);
    line-height:1.34;
  }

  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-text{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    font-size:1.04rem;
    line-height:1.6;
  }

  body.supoth-body.page-home .supoth-hero-tags{
    width:100%;
    padding:0;
    margin-bottom:1rem;
  }

  body.supoth-body.page-home .supoth-hero-tags span{
    font-size:clamp(.76rem,2.7vw,.88rem);
    padding:.36rem .28rem;
  }

  body.supoth-body.page-home .supoth-hero-actions{
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:stretch;
    align-self:stretch;
    width:100%;
    max-width:100%;
    padding:0;
    margin:.15rem 0 0;
    gap:.45rem;
  }

  body.supoth-body.page-home .supoth-hero-actions .btn-supoth-primary,
  body.supoth-body.page-home .supoth-hero-actions .btn-supoth-outline{
    flex:1 1 0;
    width:0;
    min-width:0;
    padding:.72rem .35rem;
    font-size:clamp(.88rem,3.5vw,.98rem);
    min-height:48px;
    border-radius:11px;
  }
}


[data-theme="light"] body.supoth-body.page-home .supoth-hero-actions .btn-supoth-primary{
  background:linear-gradient(135deg,rgba(5,150,105,.16),rgba(20,184,166,.1));
  border-color:rgba(5,150,105,.35);
  color:#065f46!important;
  box-shadow:0 6px 18px rgba(5,150,105,.12);
}
[data-theme="light"] body.supoth-body.page-home .supoth-hero-actions .btn-supoth-primary:hover{
  background:linear-gradient(135deg,rgba(5,150,105,.24),rgba(20,184,166,.16));
  color:#064e3b!important;
}
[data-theme="light"] body.supoth-body.page-home .supoth-hero-actions .btn-supoth-primary i{
  color:#059669!important;
}

[data-theme="light"] body.supoth-body.page-home .supoth-hero-actions .btn-supoth-outline{
  background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(99,102,241,.08));
  border-color:rgba(14,165,233,.32);
  color:#0f172a!important;
  box-shadow:0 6px 16px rgba(14,165,233,.08);
}
[data-theme="light"] body.supoth-body.page-home .supoth-hero-actions .btn-supoth-outline:hover{
  background:linear-gradient(135deg,rgba(14,165,233,.2),rgba(99,102,241,.12));
  border-color:rgba(14,165,233,.45);
}
[data-theme="light"] body.supoth-body.page-home .supoth-hero-actions .btn-supoth-outline i{
  color:#0284c7!important;
}

/* Homepage hero — smaller right-side text */
body.supoth-body.page-home .supoth-hero-grid--classic .supoth-eyebrow{
  font-size:.76rem;
  padding:.28rem .68rem;
  margin-bottom:.7rem;
}

body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-title{
  font-size:clamp(1.5rem,4vw,2.25rem);
  line-height:1.14;
  margin-bottom:.45rem;
}

body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-sub{
  font-size:clamp(1rem,2.5vw,1.32rem);
  line-height:1.32;
  margin-bottom:.7rem;
}

body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-text{
  font-size:.98rem;
  line-height:1.58;
  margin-bottom:.8rem;
}

/* Desktop — centered hero text block */
@media (min-width:721px){
  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-content{
    width:100%;
    align-self:stretch;
    text-align:center;
  }

  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-eyebrow{
    display:inline-flex;
    margin-left:auto;
    margin-right:auto;
  }

  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-title,
  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-sub,
  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-text{
    width:100%;
    max-width:100%!important;
  }

  body.supoth-body.page-home .supoth-hero-grid--classic .supoth-hero-text{
    margin-left:auto;
    margin-right:auto;
    max-width:40ch;
    text-align:center;
  }

  body.supoth-body.page-home .supoth-hero-tags{
    width:100%;
    padding:0;
  }

  body.supoth-body.page-home .supoth-hero-actions{
    width:100%;
    padding:0;
    justify-content:center;
  }
}

/* Business tags — 4 per row, 2 rows (desktop + mobile) */
body.supoth-body.page-home .supoth-hero-tags{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.45rem .4rem;
  width:100%;
  margin-bottom:1.1rem;
  padding:0 .15rem;
}

body.supoth-body.page-home .supoth-hero-tags span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:.34rem .35rem;
  font-size:clamp(.7rem,2.3vw,.86rem);
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:420px){
  body.supoth-body.page-home .supoth-hero-tags{
    gap:.38rem .22rem;
    padding:0;
  }

  body.supoth-body.page-home .supoth-hero-tags span{
    padding:.34rem .18rem;
    font-size:clamp(.72rem,3vw,.82rem);
  }

  body.supoth-body.page-home .supoth-hero-actions{
    gap:.38rem;
  }

  body.supoth-body.page-home .supoth-hero-actions .btn-supoth-primary,
  body.supoth-body.page-home .supoth-hero-actions .btn-supoth-outline{
    padding:.7rem .28rem;
    font-size:clamp(.84rem,3.8vw,.92rem);
  }
}
/* Unified header + hero — one continuous gradient (no seam) */
body.supoth-body.page-home{
  --supoth-shell-bg:
    radial-gradient(ellipse 115% 80% at 50% -8%, rgba(34,211,166,.11), transparent 48%),
    linear-gradient(180deg, #152232 0%, #121a26 35%, #0f161f 70%, var(--bg) 100%);
}

[data-theme="light"] body.supoth-body.page-home{
  --supoth-shell-bg:
    radial-gradient(ellipse 115% 80% at 50% -8%, rgba(5,150,105,.08), transparent 48%),
    linear-gradient(180deg, #e3eef8 0%, #edf3fa 40%, var(--bg) 100%);
}

body.supoth-body.page-home .supoth-header,
body.supoth-body.page-home .supoth-header-bar{
  background:var(--supoth-shell-bg)!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  border-bottom:1px solid var(--border);
}

body.supoth-body.page-home .supoth-hero{
  background:var(--supoth-shell-bg)!important;
  border-bottom:1px solid var(--border);
  flex-direction:column!important;
  align-items:stretch!important;
  min-height:auto;
  padding:2.25rem 0 2rem!important;
}

body.supoth-body.page-home .supoth-hero-grid--classic{
  gap:1rem 1.25rem;
}

body.supoth-body.page-home .supoth-hero-visual--photo{
  min-height:0!important;
  margin:0;
  padding:0;
}

body.supoth-body.page-home .supoth-hero-visual--photo .supoth-hero-visual,
body.supoth-body.page-home .supoth-hero-visual{
  min-height:0!important;
}

body.supoth-body.page-home .supoth-hero-services-wrap{
  width:100%;
  padding-top:1.25rem;
  padding-bottom:2rem;
}

body.supoth-body.page-home .supoth-hero-glow{
  display:none!important;
}


body.supoth-body.page-home .supoth-hero-stack{
  position:relative;
  z-index:1;
}

body.supoth-body.page-home .supoth-hero-services{
  margin-top:1.75rem;
  padding-bottom:.5rem;
}

.supoth-hero-services-title{
  margin:0 0 1rem;
  font-size:1.12rem;
  font-weight:700;
  color:var(--text);
  text-align:center;
  letter-spacing:.02em;
}
/* Hero service boxes */
.supoth-hero-services{
  position:relative;
  z-index:1;
  margin-top:0;
  padding-bottom:0;
  max-width:100%;
}

.supoth-hero-services-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.75rem;
}

.supoth-hero-service-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:92px;
  padding:.85rem .5rem;
  border:1px solid rgba(34,211,166,.32);
  border-radius:12px;
  background:rgba(18,26,38,.72);
  text-decoration:none;
  color:var(--text);
  text-align:center;
  transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;
}

[data-theme="light"] .supoth-hero-service-card{
  background:rgba(255,255,255,.82);
  border-color:rgba(5,150,105,.28);
}

.supoth-hero-service-card:hover{
  border-color:var(--accent);
  background:rgba(34,211,166,.1);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  color:var(--text);
}

.supoth-hero-service-card i{
  font-size:1.3rem;
  color:var(--accent);
}

.supoth-hero-service-card span{
  font-size:.82rem;
  font-weight:700;
  line-height:1.25;
}

@media (max-width:1100px){
  .supoth-hero-services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:640px){
  .supoth-hero-services{margin-top:1.5rem}
  .supoth-hero-services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .supoth-hero-service-card{min-height:84px;padding:.75rem .45rem}
  .supoth-hero-service-card span{font-size:.78rem}
}