/* Slide 08 — Competitive landscape */
.slide[data-index="7"]{
  --s8-accent:var(--accent);
  --s8-glow:rgba(0,82,245,0.35);
  --s8-tab-w:32px;
  --s8-frame-w:320px;
  --s8-col-w:calc(var(--s8-tab-w) + var(--s8-frame-w));
  --s8-col-h:420px;
  background:var(--deck-navy);
  color:var(--text);
}

.s8-competitor{
  display:flex;
  flex-direction:column;
  height:calc(100% - 48px);
  padding:0 28px 20px 36px;
  gap:10px;
  min-height:0;
}

.s8-head{
  flex:0 0 auto;
  text-align:center;
  margin-bottom:clamp(14px,2.2vh,24px);
}
.s8-head .pill{align-self:center;}

/* 3 colonnes — ligne 1 : haut des 3 boîtes aligné */
.s8-stage{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:128px var(--s8-col-w) minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:clamp(32px,4vw,56px);
  row-gap:12px;
  align-items:start;
}

.s8-groups{
  grid-column:1;
  grid-row:1 / -1;
  align-self:start;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.s8-group-btn{
  appearance:none;
  border:1px solid rgba(0,82,245,0.14);
  background:rgba(255,255,255,0.06);
  border-radius:12px;
  padding:12px 10px;
  text-align:left;
  cursor:pointer;
  font-family:var(--font);
  transition:border-color .2s,background .2s;
}
.s8-group-btn:hover{border-color:rgba(0,82,245,0.35);}
.s8-group-btn.is-active{
  border-color:var(--s8-accent,var(--accent));
  background:rgba(255,255,255,0.1);
  box-shadow:inset 0 0 0 1px var(--s8-accent,var(--accent));
}
.s8-group-btn__label{
  display:block;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text);
}
.s8-group-btn__meta{
  display:block;
  margin-top:4px;
  font-size:9px;
  font-weight:600;
  color:var(--text-dim);
}
.s8-group-btn.is-active .s8-group-btn__label{color:var(--s8-accent,var(--accent));}

/* Centre : onglet vertical + cadre fixe (seul le PNG change) */
.s8-hero-col{
  grid-column:2;
  grid-row:1 / 3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width:var(--s8-col-w);
  min-width:var(--s8-col-w);
  max-width:var(--s8-col-w);
  justify-self:center;
  min-height:0;
}

.s8-hero{
  width:100%;
  margin:0;
  padding:0;
  flex-shrink:0;
}

.s8-hero__cluster{
  display:flex;
  flex-direction:row;
  align-items:stretch;
  width:100%;
  height:var(--s8-col-h);
  min-height:var(--s8-col-h);
  max-height:var(--s8-col-h);
}

.s8-hero__tab{
  flex:0 0 var(--s8-tab-w);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px 0 0 14px;
  border:1px solid rgba(0,82,245,0.2);
  border-right:none;
  background:rgba(255,255,255,0.08);
  box-sizing:border-box;
}

.s8-hero__vertical{
  margin:0;
  font-size:9px;
  font-weight:800;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(187,187,255,0.85);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}

.s8-hero__frame{
  flex:1 1 var(--s8-frame-w);
  width:var(--s8-frame-w);
  min-width:var(--s8-frame-w);
  max-width:var(--s8-frame-w);
  height:var(--s8-col-h);
  min-height:var(--s8-col-h);
  max-height:var(--s8-col-h);
  border-radius:0 18px 18px 0;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  overflow:hidden;
  position:relative;
  box-sizing:border-box;
}

.s8-hero__frame:not(.has-character-bg){
  border-color:rgba(0,82,245,0.16);
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%,rgba(0,82,245,0.22),transparent 58%),
    linear-gradient(165deg,rgba(255,255,255,0.06) 0%,rgba(0,13,44,0.55) 100%);
}

.s8-hero__stage,
.s8-hero__placeholder{
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
}

.s8-hero__character{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  object-fit:contain;
  object-position:center bottom;
  opacity:0;
  transition:opacity 0.2s ease;
}

.s8-hero__stage.has-character .s8-hero__character,
.s8-hero__placeholder.has-character .s8-hero__character{
  opacity:1;
}

.s8-hero__initials{
  position:absolute;
  left:50%;
  bottom:18%;
  transform:translateX(-50%);
  font-size:4rem;
  font-weight:800;
  line-height:1;
  color:var(--s8-accent,var(--accent));
  opacity:1;
  transition:opacity 0.2s ease;
  pointer-events:none;
}

.s8-hero__stage.has-character .s8-hero__initials,
.s8-hero__placeholder.has-character .s8-hero__initials{
  opacity:0;
}

/* Vignettes centrées sous le bloc hero */
.s8-roster{
  width:100%;
  min-height:56px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
  flex-shrink:0;
}
.s8-roster:empty,
.s8-roster[hidden]{display:none;}

.s8-thumb{
  appearance:none;
  width:56px;
  height:56px;
  border-radius:14px;
  border:2px solid rgba(0,82,245,0.12);
  background:rgba(255,255,255,0.08);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800;
  color:var(--text-dim);
  font-family:var(--font);
}
.s8-thumb.is-active{
  border-color:var(--s8-accent,var(--accent));
  color:var(--s8-accent,var(--accent));
}
.s8-thumb--logo{padding:6px;background:#fff;}
.s8-thumb__logo{width:38px;height:38px;object-fit:contain;}

/* Droite : texte puis radar en dessous, décalé à droite du hero */
.s8-detail{
  --s8-detail-w:min(300px,100%);
  --s8-radar-w:min(300px,100%);
  grid-column:3;
  grid-row:1 / 3;
  align-self:start;
  min-width:0;
  margin:0;
  padding:0 0 0 clamp(16px,2.5vw,40px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}

.s8-detail__copy{
  width:var(--s8-detail-w);
  max-width:100%;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex-shrink:0;
}

.s8-detail__category{
  margin:0;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.s8-detail__tag{
  margin:0;
  font-size:11px;
  font-weight:700;
  color:var(--s8-accent,var(--accent));
}
.s8-detail__name{
  margin:0;
  min-height:2.2em;
  max-height:2.2em;
  overflow:hidden;
  font-size:1.75rem;
  font-weight:800;
  line-height:1.1;
  color:var(--text);
}
.s8-detail__desc{
  margin:0;
  width:100%;
  box-sizing:border-box;
  min-height:4.5em;
  max-height:4.5em;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  font-size:12px;
  line-height:1.55;
  color:var(--text-dim);
}

.s8-radar-panel{
  --s8-radar-accent:var(--s8-accent,var(--accent));
  align-self:flex-start;
  width:var(--s8-radar-w);
  max-width:100%;
  margin:0;
  padding:0;
  flex-shrink:0;
  box-sizing:border-box;
  overflow:visible;
  border-radius:16px;
  background:
    linear-gradient(155deg,rgba(0,82,245,0.14) 0%,rgba(123,123,255,0.08) 42%,rgba(0,0,0,0.2) 100%),
    rgba(8,14,32,0.72);
  border:1px solid color-mix(in srgb,var(--s8-radar-accent) 42%,rgba(255,255,255,0.12));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 32px color-mix(in srgb,var(--s8-radar-accent) 12%,transparent),
    0 0 0 1px rgba(0,0,0,0.35),
    0 20px 48px rgba(0,0,0,0.45),
    0 0 40px color-mix(in srgb,var(--s8-radar-accent) 22%,transparent);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  position:relative;
}
.s8-radar-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(ellipse 80% 55% at 50% 0%,color-mix(in srgb,var(--s8-radar-accent) 18%,transparent),transparent 68%);
}
.s8-radar-panel__head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px 5px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.s8-radar-panel__dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--s8-radar-accent);
  box-shadow:0 0 10px var(--s8-radar-accent),0 0 20px color-mix(in srgb,var(--s8-radar-accent) 55%,transparent);
  flex-shrink:0;
}
.s8-radar-panel__title{
  margin:0;
  font-size:9px;
  font-weight:800;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(244,247,252,0.92);
  text-align:center;
}
.s8-radar-stage{
  position:relative;
  z-index:1;
  margin:5px 8px 8px;
  padding:6px 8px 8px;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--s8-radar-accent) 14%,transparent) 0%,transparent 62%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0,transparent 18px,rgba(255,255,255,0.025) 18px,rgba(255,255,255,0.025) 19px),
    rgba(0,0,0,0.28);
  border:1px solid rgba(255,255,255,0.07);
  box-shadow:inset 0 0 40px color-mix(in srgb,var(--s8-radar-accent) 10%,transparent);
  overflow:visible;
}
.s8-radar-stage::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:10px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,0.04);
}
.s8-radar-panel--compare .s8-radar-stage{
  background:
    radial-gradient(circle at 50% 48%,rgba(0,223,244,0.12) 0%,transparent 62%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0,transparent 18px,rgba(255,255,255,0.03) 18px,rgba(255,255,255,0.03) 19px),
    rgba(0,0,0,0.32);
}
.s8-radar-wrap{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  min-height:0;
  width:100%;
  overflow:visible;
}
.s8-radar-wrap .s8-radar{
  width:100%;
  max-width:252px;
  height:auto;
  margin:0 auto;
  display:block;
  flex-shrink:0;
  overflow:visible;
}
.s8-radar-wrap .s8-radar__label{
  font-size:9px;
  font-weight:800;
  fill:rgba(200,220,255,0.95);
  letter-spacing:0.14em;
  paint-order:stroke fill;
  stroke:rgba(0,8,28,0.85);
  stroke-width:3px;
}
.s8-radar-wrap .s8-radar__glow{
  pointer-events:none;
  mix-blend-mode:screen;
  filter:blur(1px);
}
.s8-radar-wrap .s8-radar__ring{
  fill:rgba(255,255,255,0.015);
  stroke:rgba(255,255,255,0.1);
  stroke-width:1;
}
.s8-radar-wrap .s8-radar__ring--outer{
  fill:rgba(255,255,255,0.03);
  stroke:color-mix(in srgb,var(--s8-radar-accent,#5eb0ff) 35%,rgba(255,255,255,0.2));
  stroke-width:1.25;
}
.s8-radar-wrap .s8-radar__axis{
  stroke:rgba(255,255,255,0.16);
  stroke-width:1;
  stroke-dasharray:3 5;
}
.s8-radar-wrap .s8-radar__hub-glow{
  animation:s8-radar-pulse 3s ease-in-out infinite;
}
@keyframes s8-radar-pulse{
  0%,100%{opacity:0.55;}
  50%{opacity:1;}
}
/* Gaging */
.s8-hero[data-group="gaging"] .s8-hero__frame.has-character-bg{
  background:linear-gradient(165deg,#1e1432 0%,#0d1a2d 100%);
  border-color:rgba(187,187,255,0.35);
}

.slide[data-index="7"] .s8-group-btn[data-group="wearables"]{--s8-accent:#0ea5e9;}
.slide[data-index="7"] .s8-group-btn[data-group="fitness"]{--s8-accent:#f97316;}
.slide[data-index="7"] .s8-group-btn[data-group="health"]{--s8-accent:#8b5cf6;}
.slide[data-index="7"] .s8-group-btn[data-group="gaging"].is-active{--s8-accent:#7c3aed;}

@media (max-width:1100px){
  .s8-stage{
    grid-template-columns:96px var(--s8-col-w);
    grid-template-rows:auto auto auto;
  }
  .s8-groups{grid-column:1;grid-row:1 / 3;}
  .s8-hero-col{grid-column:2;grid-row:1 / 3;}
  .s8-detail{
    grid-column:1 / -1;
    grid-row:3;
    padding-left:0;
  }
}