/* FibreMaroc speed test */
.fmp-speed{
  --orange:#ff7900;
  --iam:#0f63c7;
  --ink:#101828;
  --muted:#667085;
  --line:#e5e7eb;
  --soft:#f6f8fc;
}
.fmp-speed-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:28px;
  padding:48px 5% 36px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,121,0,.16),transparent 30%),
    radial-gradient(circle at 80% 20%,rgba(15,99,199,.14),transparent 28%),
    linear-gradient(180deg,#fff 0%,var(--soft) 100%);
}
.fmp-speed-copy{max-width:760px;margin:0 auto}
.fmp-speed-copy h1{
  margin:14px 0 8px!important;
  font-size:clamp(36px,5vw,58px)!important;
  line-height:1.05!important;
  letter-spacing:-.03em;
}
.fmp-speed-lead{
  margin:0 0 10px!important;
  font-size:clamp(20px,2.4vw,28px)!important;
  font-weight:800;
  color:var(--ink);
}
.fmp-speed-copy > p:last-child{color:var(--muted);max-width:620px;margin:0 auto}

.fmp-speed-panel{
  width:min(560px,100%);
  margin:0 auto;
  padding:28px 22px 24px;
  border:1px solid var(--line);
  border-radius:28px;
  background:#fff;
  box-shadow:0 24px 60px rgba(16,24,40,.12);
}
.fmp-speed-gauge{position:relative;margin:0 auto 8px;width:min(280px,100%)}
.fmp-speed-arc{width:100%;height:auto;display:block}
.fmp-speed-track{stroke:#e8eef7}
.fmp-speed-fill{
  stroke:url(#none);
  stroke:var(--orange);
  transition:stroke-dasharray .35s ease;
}
.fmp-speed-gauge[data-phase="down"] .fmp-speed-fill{stroke:var(--orange)}
.fmp-speed-gauge[data-phase="up"] .fmp-speed-fill{stroke:var(--iam)}
.fmp-speed-gauge[data-phase="done"] .fmp-speed-fill{
  stroke:#067647;
}
.fmp-speed-readout{
  position:absolute;left:0;right:0;bottom:8px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.fmp-speed-readout strong{
  font-size:clamp(40px,8vw,56px);line-height:1;font-weight:900;color:var(--ink);
}
.fmp-speed-readout span{font-weight:800;color:var(--muted);font-size:14px}
.fmp-speed-readout small{font-weight:700;color:var(--muted);font-size:13px;margin-top:4px}
.fmp-speed-engine{
  display:block;margin-top:6px;font-style:normal;font-size:11px;font-weight:800;
  color:var(--iam);background:rgba(15,99,199,.08);padding:4px 10px;border-radius:999px;
}

.fmp-speed-metrics{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin:18px 0 8px;
}
.fmp-speed-metrics[hidden]{display:none!important}
.fmp-speed-metrics > div{
  padding:12px;border-radius:16px;background:var(--soft);border:1px solid #eef2f7;
  display:flex;flex-direction:column;gap:4px;text-align:center;
}
.fmp-speed-metrics span{font-size:12px;font-weight:800;color:var(--muted)}
.fmp-speed-metrics strong{font-size:18px;font-weight:900;color:var(--ink)}

.fmp-speed-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}
.fmp-speed-start,.fmp-speed-again{
  min-height:52px;padding:0 28px;border:0;border-radius:999px;cursor:pointer;
  font-weight:900;font-size:16px;color:#fff;
  background:linear-gradient(135deg,var(--orange),var(--iam));
  box-shadow:0 14px 30px rgba(255,121,0,.28);
  transition:transform .15s ease;
}
.fmp-speed-start:hover,.fmp-speed-again:hover{transform:translateY(-1px)}
.fmp-speed-start:disabled{opacity:.65;cursor:wait;transform:none}
.fmp-speed-again{background:#101828;box-shadow:none}
.fmp-speed-again[hidden],.fmp-speed-start[hidden]{display:none!important}

.fmp-speed-result{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:center;
}
.fmp-speed-result[hidden]{display:none!important}
.fmp-speed-result h2{margin:0 0 8px;font-size:22px;font-weight:900}
.fmp-speed-result p{margin:0 0 16px;color:var(--muted);line-height:1.6}
.fmp-speed-ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fmp-speed-cta-primary,.fmp-speed-cta-wa{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 18px;border-radius:999px;font-weight:900;
}
.fmp-speed-cta-primary{
  background:linear-gradient(135deg,var(--orange),var(--iam));color:#fff!important;
}
.fmp-speed-cta-wa{background:#25D366;color:#fff!important}

.fmp-speed-tips ul{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
  max-width:820px;margin-inline:auto;
}
.fmp-speed-tips li{
  padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);
  font-weight:700;color:var(--ink);
}

@media(max-width:720px){
  .fmp-speed-hero{padding:32px 4% 24px}
  .fmp-speed-panel{padding:22px 16px}
  .fmp-speed-metrics{grid-template-columns:1fr 1fr}
  .fmp-speed .fmp-nav nav a:not(.fmp-nav-cta){display:none}
}