/* ============================================================
   CERTIFICATIONS PAGE — cream video hero (light editorial,
   distinct from the dark projects hero). Stats band and
   .svc-features-* cards are shared in base.css.
   ============================================================ */

/* ——— hero shell ——— */
.hero-video-bg{
  position:absolute; inset:0; z-index:0;
  display:flex; overflow:hidden;
}
.hero-video-bg video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hero-video-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.page-hero--certifications{
  background:var(--cream);
  color:var(--ink);
  padding:110px 0 64px;
  position:relative; overflow:hidden;
}
.page-hero--certifications::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 340px at 84% -12%, rgba(149,80,201,.1), transparent 58%),
    radial-gradient(520px 300px at -6% 42%, rgba(149,80,201,.06), transparent 55%);
}
.page-hero--certifications::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(20,10,40,.045) 0 1px, transparent 1px 76px),
    repeating-linear-gradient(0deg, rgba(20,10,40,.045) 0 1px, transparent 1px 76px);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 70%);
  mask-image:linear-gradient(180deg, #000, transparent 70%);
}
.page-hero--certifications .hero-video-overlay{
  background-color:rgba(255,254,252,.62);
  background-image:radial-gradient(130% 130% at 18% 22%, rgba(250,246,239,.66) 0%, rgba(250,246,239,.59) 45%, rgba(250,246,239,.4) 100%);
}
.page-hero--certifications .page-hero-inner{ position:relative; z-index:1; }
.page-hero--certifications .page-hero-copy{ position:relative; z-index:2; }
.page-hero--certifications .page-hero-copy .eyebrow{
  background:#fff;
  border:1px solid var(--line-warm);
  color:var(--purple-deep);
  padding:8px 14px; border-radius:999px;
  box-shadow:var(--card-shadow-sm);
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.12em;
}
.page-hero--certifications .page-hero-copy .eyebrow::before{ background:var(--purple); }
.page-hero--certifications .page-hero-copy h1{ color:var(--ink); }
.page-hero--certifications .page-hero-copy p{
  color:var(--ink-soft);
  max-width:620px;
  margin:0 auto 30px;
}
.page-hero--certifications .page-hero-actions{ margin-top:32px; }
.page-hero--certifications .btn-ghost-white{
  background:#fff; border-color:var(--line-warm); color:var(--purple-deep);
}
.page-hero--certifications .btn-ghost-white:hover{ background:var(--purple-tint); color:var(--purple-deep); }

/* ——— credentials marquee (same ticker as the homepage hero) ——— */
.cert-trustbar{ padding:56px 0 30px; }
.cert-trustbar .trustbar{ margin:0; }
.trustbar{
  margin:34px 0 8px; padding:18px 0;
  border-top:1px solid var(--line-warm); border-bottom:1px solid var(--line-warm);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trustbar-track{
  display:flex; align-items:center; width:max-content;
  font-family:var(--font-heading); font-weight:700; font-size:17px; letter-spacing:.02em;
  color:#8d8496;
  animation:trustScroll 26s linear infinite;
  will-change:transform;
}
.trustbar:hover .trustbar-track{ animation-play-state:paused; }
.trustbar-track span{ opacity:.85; transition:opacity .2s, color .2s; white-space:nowrap; padding:0 32px; }
.trustbar-track span:hover{ opacity:1; color:var(--purple-deep); }
@keyframes trustScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .trustbar-track{ animation:none; }
}

/* ============ RESPONSIVE — CERTIFICATIONS ============ */
@media (max-width:1100px){
  .page-hero--certifications{ padding:100px 0 56px; }
}
@media (max-width:768px){
  .page-hero--certifications{ padding:92px 0 48px; }
}
@media (max-width:640px){
  .page-hero--certifications{ padding:84px 0 44px; }
}