/* ============================================================
   BioSky — Solution page layout
   7-section template (mirrors Figma "Dispatch Optimisation — Option A")
   Reuses tokens + components from styles.css
   ============================================================ */

/* ---------- breadcrumb / eyebrow above hero ---------- */
.sp-hero{
  position:relative; background:var(--navy); color:var(--on-navy);
  padding:clamp(150px,18vh,210px) 0 clamp(72px,10vh,120px);
  overflow:hidden;
}
.sp-hero__grid{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(47,230,189,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,230,189,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000, transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 70% 30%, #000, transparent 75%);
}
.sp-hero__inner{ position:relative; max-width:50rem; }
.sp-eyebrow{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--hair-light); border-radius:999px;
  padding:.45em 1em; margin-bottom:1.6rem;
}
.sp-eyebrow::before{
  content:""; width:1.2em; height:1.2em; background-color:var(--accent);
  -webkit-mask:var(--sat) center/contain no-repeat; mask:var(--sat) center/contain no-repeat;
}
.sp-hero__title{
  font-family:var(--display); font-weight:600; letter-spacing:-.025em; line-height:1.04;
  font-size:clamp(2.4rem,5vw,3.6rem); text-wrap:balance; color:var(--on-navy);
}
.sp-hero__sub{
  margin-top:1.3rem; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.5;
  color:var(--on-navy-mute); max-width:40ch;
}
.sp-hero__cta{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; }
.sp-hero .btn--solid{ background:var(--accent); color:var(--navy); }
.sp-hero .btn--solid:hover{ background:var(--accent-bright); }
.sp-hero .btn--ghost{ border-color:var(--hair-light); color:var(--on-navy); }
.sp-hero .btn--ghost:hover{ border-color:var(--on-navy); }

/* ---------- generic section scaffolding ---------- */
.sp-sec{ padding:var(--sec-y) 0; }
.sp-head{ max-width:46rem; margin-bottom:clamp(40px,5vw,68px); }
.sp-head .h2{ margin-top:.7rem; }

/* ---------- 2 · value proposition ---------- */
.sp-vp__wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.sp-vp__text h2{ margin-top:.7rem; }
.sp-vp__text p{ margin-top:1.3rem; color:var(--ink-body); font-size:1.12rem; line-height:1.6; max-width:46ch; }

/* dashboard visual (dark panel + mini diagram) */
.sp-vis{
  position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden;
  background:linear-gradient(160deg, var(--navy), var(--navy-2));
  border:1px solid rgba(47,230,189,.16); box-shadow:0 30px 60px -30px rgba(2,47,47,.5);
}
.sp-vis__grid{
  position:absolute; inset:0; opacity:.6;
  background-image:
    linear-gradient(rgba(47,230,189,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,230,189,.06) 1px, transparent 1px);
  background-size:34px 34px;
}
.sp-vis svg{ position:absolute; inset:0; width:100%; height:100%; }
.sp-vis__tag{
  position:absolute; left:18px; top:18px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; color:var(--accent); border:1px solid rgba(47,230,189,.4);
  padding:.35em .7em; border-radius:6px; background:rgba(2,47,47,.6);
}
.sp-vis__card{
  position:absolute; right:18px; bottom:18px; padding:.8em 1em; border-radius:12px;
  background:rgba(10,74,70,.82); border:1px solid rgba(47,230,189,.22);
  backdrop-filter:blur(6px); max-width:62%;
}
.sp-vis__card b{ display:block; font-family:var(--display); color:var(--on-navy); font-size:.98rem; }
.sp-vis__card span{ font-size:.82rem; color:var(--on-navy-mute); }

/* line/curve flow */
.sp-flow{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:6 320; animation:sp-draw 3.2s linear infinite; }
@keyframes sp-draw{ to{ stroke-dashoffset:-326; } }
.sp-static{ fill:none; stroke:rgba(236,234,226,.28); stroke-width:1.4; stroke-linecap:round; }
.sp-node{ fill:var(--accent); }
.sp-node--pulse{ animation:sp-pulse 2.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes sp-pulse{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.sp-box{ fill:none; stroke:rgba(236,234,226,.3); stroke-width:1.4; }
.sp-box--live{ stroke:var(--accent); animation:sp-pulse 2.2s ease-in-out infinite; }
.sp-bar{ fill:rgba(47,230,189,.55); }
.sp-bar--hi{ fill:var(--accent); }

/* ---------- 3 · challenge / 4 · powers (3-up cards) ---------- */
.sp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--hair); }
.sp-card{ padding:clamp(28px,3vw,40px) clamp(20px,2.2vw,36px); border-right:1px solid var(--hair); }
.sp-card:last-child{ border-right:none; }
.sp-card__ico{ display:block; width:42px; height:42px; color:var(--accent-deep); margin-bottom:1.1rem; }
.sp-card__layer{ display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  color:var(--accent-deep); margin-bottom:.4rem; }
.section--navy .sp-card__layer{ color:var(--accent); }
/* 4-up layer grid */
.sp-cards--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){ .sp-cards--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .sp-cards--4{ grid-template-columns:1fr; } }
.sp-card__ico svg{ width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sp-card h3{ font-family:var(--display); font-size:1.22rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.5rem; }
.sp-card p{ color:var(--ink-body); font-size:1.02rem; line-height:1.55; }

/* powers section sits on navy */
.section--navy .sp-cards{ border-top-color:var(--hair-light); }
.section--navy .sp-card{ border-right-color:var(--hair-light); }
.section--navy .sp-card__ico{ color:var(--accent); }
.section--navy .sp-card h3{ color:var(--on-navy); }
.section--navy .sp-card p{ color:var(--on-navy-mute); }

/* ---------- 5 · key features (6 bullets, 2 col) ---------- */
.sp-feats{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(40px,5vw,80px); border-top:1px solid var(--hair); }
.sp-feat{ display:flex; gap:1em; align-items:flex-start; padding:1.25em 0; border-bottom:1px solid var(--hair); }
.sp-feat__mark{ flex:none; width:1.4em; height:1.4em; margin-top:.15em;
  background-color:var(--accent-deep);
  -webkit-mask:var(--sat) center/contain no-repeat; mask:var(--sat) center/contain no-repeat; }
.sp-feat p{ font-size:1.06rem; line-height:1.5; color:var(--ink); }

/* ---------- 6 · impact (reuse metric look, 3-up) ---------- */
.sp-impact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.sp-impact__grid--4{ grid-template-columns:repeat(4,1fr); }
.sp-metric{ padding:clamp(20px,2.4vw,36px) clamp(18px,2vw,34px); border-right:1px solid var(--hair-light); }
.sp-metric:last-child{ border-right:none; }
.sp-metric__v{ font-family:var(--display); font-weight:700; font-size:clamp(2.2rem,4vw,3rem);
  color:var(--accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1; }
.sp-metric__l{ display:block; margin-top:.7rem; color:var(--on-navy-mute); font-size:1.02rem; }
.sp-impact__note{ margin-top:1.6rem; font-family:var(--mono); font-size:.74rem; color:var(--accent);
  opacity:.7; }

/* ---------- 7 · closing CTA ---------- */
.sp-cta{ position:relative; text-align:center; padding:clamp(90px,12vh,150px) 0; overflow:hidden; }
.sp-cta__title{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.12;
  font-size:clamp(1.7rem,3vw,2.4rem); text-wrap:balance; max-width:24ch; margin:0 auto 2.2rem; color:var(--on-navy); }
.sp-cta__contact{ display:flex; justify-content:center; gap:clamp(24px,4vw,56px); flex-wrap:wrap; margin-top:3rem; }
.sp-cta__contact div{ text-align:left; }
.sp-cta__contact h4{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.4rem; }
.sp-cta__contact a, .sp-cta__contact p{ color:var(--on-navy); font-size:1rem; }

/* ---------- responsive ---------- */
@media (max-width:880px){
  .sp-vp__wrap{ grid-template-columns:1fr; }
  .sp-cards{ grid-template-columns:1fr; }
  .sp-card{ border-right:none; border-bottom:1px solid var(--hair); }
  .section--navy .sp-card{ border-bottom-color:var(--hair-light); }
  .sp-feats{ grid-template-columns:1fr; }
  .sp-impact__grid{ grid-template-columns:1fr; }
  .sp-metric{ border-right:none; border-bottom:1px solid var(--hair-light); padding:22px 0; }
}