/* Global Accreditations hero (accreditations_15102026.blade.php) — scoped to .acc-hero */
/* ==========================================================
   GLOBAL ACCREDITATIONS HERO — Dark #182878 (v2)
   Scoped to .acc-hero. Tokens from MYCPE ONE V5.0.
   ========================================================== */
.acc-hero {
  --brand-50: #EBEEFD;
  --brand-100: #D8DEFC;
  --brand-200: #9CABF7;
  --brand-300: #758AF4;
  --brand-400: #4E69F1;
  --brand-500: #3A58EF;
  --brand-900: #04092A;
  --purple-400: #7162EA;
  --success: #5EE0A5;

  position: relative;
  overflow: hidden;
  padding: 16px 0 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
  /* base #182878 with light pooling behind the visual */
  background:
    radial-gradient(900px 700px at 78% 50%, rgba(78,105,241,.45), transparent 62%),
    radial-gradient(700px 480px at 4% 0%,  rgba(113,98,234,.30), transparent 62%),
    radial-gradient(640px 420px at 32% 112%, rgba(58,88,239,.28), transparent 62%),
    #182878;
}
/* fine dot field, strongest behind the visual */
.acc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 78% 50%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 80% at 78% 50%, #000 0%, transparent 75%);
  pointer-events: none;
}
/* ambient light that follows the cursor */
.acc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(360px circle at var(--mx, 70%) var(--my, 40%), rgba(158,171,247,.16), transparent 65%);
  pointer-events: none;
}
.acc-hero > .container-xxl { position: relative; z-index: 1; }

/* ---------- Left: copy ---------- */
.acc-title {
  margin: 0 0 14px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
}
.acc-sub {
  margin: 0 0 40px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255,255,255,.78);
}

/* ---------- Glass stat tiles ---------- */
.acc-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 640px;
}
.acc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 140px;
  padding: 18px 18px 20px;
  text-align: left;
  font: inherit;
  color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  cursor: pointer;
  overflow: hidden;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease, color .3s ease;
}
.acc-tile:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.28); }
.acc-tile.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 100%);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 18px 40px rgba(4,9,42,.40), 0 0 0 4px rgba(158,171,247,.14);
  transform: translateY(-4px);
}
.acc-tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.acc-tile-check {
  position: absolute;
  top: 14px; right: 14px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--success);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.acc-tile-check svg { width: 13px; height: 13px; }
.acc-tile.is-active .acc-tile-check { background: var(--success); border-color: var(--success); color: #062B1A; }

.acc-tile-pre   { font-size: 14px; font-weight: 500; color: var(--brand-200); }
.acc-tile-num   {
  margin-top: auto;
  display: flex; align-items: baseline;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.acc-tile-plus  { color: var(--brand-200); margin-left: 1px; }
.acc-tile-label { font-size: 15px; font-weight: 500; line-height: 1.3; color: rgba(255,255,255,.85); }

.acc-tile-progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand-300), #fff);
  opacity: 0;
}
.acc-hero.is-cycling .acc-tile.is-active .acc-tile-progress {
  opacity: 1;
  animation: acc-fill 5s linear forwards;
}
.acc-hero.is-paused .acc-tile-progress { animation-play-state: paused; }
@keyframes acc-fill { from { width: 0; } to { width: 100%; } }

/* ---------- CTAs ---------- */
.acc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.acc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.5;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.acc-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.acc-btn-primary { background: #fff; color: #182878; }
.acc-btn-primary:hover { background: var(--brand-50); color: #182878; }
.acc-btn-primary:active { background: var(--brand-100); }
.acc-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.acc-btn-outline:hover { background: #fff; color: #182878; border-color: #fff; }

/* ---------- Right: boxless glowing visual ---------- */
.acc-visual {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;
  margin: -9% 0 -9% auto; /* trims the empty band above/below the logos */
}
.acc-visual::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  z-index: 0;
  background:
    radial-gradient(circle at 26% 74%, rgba(56,189,248,.10), transparent 54%),
    radial-gradient(circle at 76% 24%, rgba(139,124,246,.10), transparent 54%),
    radial-gradient(circle at 50% 50%, rgba(78,105,241,.14), transparent 66%);
  filter: blur(34px);
  pointer-events: none;
}
.acc-pane {
  z-index: 1;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.acc-pane.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }

/* View 1 — orbit */
.acc-pane svg { width: 100%; height: 100%; overflow: visible; }
.acc-pane .ring      { fill: none; stroke: rgba(255,255,255,.20); stroke-width: 1; }
.acc-pane .ring-c    { stroke: rgba(125,211,252,.38); }
.acc-pane .ring-v    { stroke: rgba(158,171,247,.38); }
.acc-pane .ring-dash { stroke: rgba(255,255,255,.28); stroke-dasharray: 2 8; stroke-linecap: round; }
.acc-pane .spoke     { stroke: rgba(158,171,247,.32); stroke-width: 1; }
.acc-pane .arc       { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.acc-pane .spin      { transform-box: view-box; transform-origin: 50% 50%; }
.acc-pane .spin-a    { animation: acc-spin 80s linear infinite; }
.acc-pane .spin-b    { animation: acc-spin 120s linear infinite reverse; }
@keyframes acc-spin { to { transform: rotate(360deg); } }

.acc-pane .node {
  fill: var(--nc, #C7D0FB);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  filter: drop-shadow(0 0 3px var(--nc, #9CABF7));
  transition: transform .2s ease, fill .5s ease;
}
    .acc-pane .node.lit { fill: #fff; }
.acc-pane.is-on .node {
  transform: scale(1);
  transition: transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * 45ms + .15s), fill .5s ease;
}
.acc-pane .core-glow { filter: drop-shadow(0 0 10px rgba(99,102,241,.45)); }
.acc-pane .core-pulse {
  fill: none; stroke: var(--brand-200); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: acc-pulse 2.8s ease-out infinite;
}
@keyframes acc-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }

/* View 2 — 100+ qualifications */
.acc-grid {
  width: min(86%, 420px);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 7px;
}
.acc-cell {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 7px;
  background: rgba(255,255,255,.07);
  transition: background .2s ease, box-shadow .2s ease;
}
.acc-cell.t1 { --c: #4E69F1; }
.acc-cell.t2 { --c: #9CABF7; }
.acc-cell.t3 { --c: #758AF4; }
.acc-cell.t4 { --c: #9CABF7; }
.acc-cell.t5 { --c: #4E69F1; }
.acc-cell.t6 { --c: #758AF4; }
.acc-cell.t7 { --c: #5CC8F2; }
.acc-cell.t8 { --c: #8B7CF6; }
.acc-pane.is-on .acc-cell {
  background: var(--c);
  box-shadow: 0 0 6px color-mix(in srgb, var(--c) 28%, transparent);
  transition: background .5s ease calc(var(--d) * 28ms), box-shadow .5s ease calc(var(--d) * 28ms);
}
.acc-cell:last-child::after {
  content: "+";
  font-size: 1.4rem; font-weight: 700; line-height: 1;
  color: #182878;
}
.acc-pane.is-on .acc-cell:last-child { --c: #fff; }

/* View 3 — 15,000+ hours (waveform) */
.acc-bars {
  width: 92%;
  height: 320px;
  display: flex; align-items: center; justify-content: space-between; gap: 5px;
  filter: drop-shadow(0 0 4px rgba(99,102,241,.3));
}
.acc-bar { flex: 1; max-width: 11px; height: 0; transition: height .2s ease; }
.acc-pane.is-on .acc-bar {
  height: calc(var(--h) * 100%);
  transition: height .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 18ms);
}
.acc-bar span {
  display: block; width: 100%; height: 100%;
  border-radius: 99px;
  background: var(--bar-bg, linear-gradient(180deg, #fff, #9CABF7 35%, #7162EA));
  animation: acc-eq var(--dur, 1.6s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes acc-eq { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .acc-hero { padding: 16px 0 24px; }
  .acc-tabs { max-width: none; }
  .acc-visual { max-width: 460px; margin: -9% auto; }
}
@media (max-width: 575.98px) {
  .acc-tabs { grid-template-columns: 1fr; }
  .acc-tile { min-height: 0; padding: 16px 18px; }
  .acc-tile-num { margin-top: 2px; font-size: 2rem; }
  .acc-btn { flex: 1 1 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .acc-hero *, .acc-hero *::before, .acc-hero *::after {
    animation: none !important;
    transition: none !important;
  }
}

.acc-hero {
  --bgx-line: rgba(255,255,255,.22);
  --bgx-line2: rgba(158,171,247,.34);
}
/* ==========================================================
   ABSTRACT BACKGROUND v2: corner rings, glass tiles, light beams.
   Keeps a clear "quiet zone" behind the visual so it stays the hero.
   ========================================================== */
.acc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* dim behind the text (left) AND clear the area behind the visual */
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 40%, #000 62%),
    radial-gradient(ellipse 23% 48% at 71% 52%, transparent 0%, transparent 62%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 40%, #000 62%),
    radial-gradient(ellipse 23% 48% at 71% 52%, transparent 0%, transparent 62%, #000 100%);
          mask-composite: intersect;
}
.acc-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.acc-bg .rings circle { fill: none; stroke: var(--bgx-line); stroke-width: 1.2; }
.acc-bg .rings .dash  { stroke: var(--bgx-line2); stroke-dasharray: 2 9; stroke-linecap: round; }
.acc-bg .glass { stroke: var(--bgx-line); stroke-width: 1.2; }
.acc-bg .plus path { fill: none; stroke: var(--bgx-line2); stroke-width: 2; stroke-linecap: round; }

/* soft diagonal light beams (no hard lines) */
.acc-bg::before, .acc-bg::after {
  content: "";
  position: absolute;
  top: -30%;
  height: 160%;
  transform: rotate(28deg);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(158,171,247,.16), transparent);
  filter: blur(22px);
}
.acc-bg::before { left: 6%;  width: 260px; }
.acc-bg::after  { left: 30%; width: 120px; opacity: .8; }

.acc-bg .fl { animation: acc-float 9s ease-in-out infinite alternate; }
.acc-bg .fl-b { animation-duration: 13s; animation-direction: alternate-reverse; }
.acc-bg .fl-c { animation-duration: 11s; animation-delay: -4s; }
@keyframes acc-float { from { transform: translate3d(0, -9px, 0); } to { transform: translate3d(0, 9px, 0); } }

@media (max-width: 991.98px) {
  .acc-bg { -webkit-mask-image: none; mask-image: none; opacity: .6; }
  .acc-bg .fl circle { display: none; }
}

/* ==========================================================
   LOGO VISUAL: shared styles
   ========================================================== */
.acc-visual { container-type: inline-size; }
/* stat tiles are static in the logo versions */
.acc-tile {
  cursor: default;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 100%);
  border-color: rgba(255,255,255,.28);
}
.acc-tile:hover { transform: translateY(-4px); background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.07) 100%); border-color: rgba(255,255,255,.5); }
.acc-tile .acc-tile-check { background: #5EE0A5; border-color: #5EE0A5; color: #062B1A; }

.logo-tile {
  position: relative;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(4,9,42,.28), 0 0 0 1px rgba(255,255,255,.6) inset;
  transition: transform .3s ease, box-shadow .3s ease;
}
.logo-tile img {
  display: block;
  width: auto; height: auto;
  max-width: min(86%, var(--mw));
  max-height: 80%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.logo-tile .tip {
  position: absolute;
  left: 50%; bottom: calc(100% + 8px);
  padding: 6px 10px;
  font-size: 12px; font-weight: 600; line-height: 1.3;
  white-space: nowrap;
  color: #fff;
  background: #0A1244;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 5;
}
.logo-tile:hover .tip { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Floating logo canvas (subtle) ---------- */
.acc-float { overflow: visible; }
.fl-orbits { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fl-orbits circle { fill: none; stroke: rgba(255,255,255,.10); stroke-width: .18; }
.fl-orbits .dash { stroke: rgba(158,171,247,.16); stroke-dasharray: .4 1.6; stroke-linecap: round; }

.fl-item {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
  transform: translate(-50%, -50%);
  z-index: var(--z, 5);
}
.fl-item:hover { z-index: 40; }
.fl-par {
  width: 100%; height: 100%;
  transform: translate(calc(var(--px, 0) * var(--depth, 1) * -0.6cqw), calc(var(--py, 0) * var(--depth, 1) * -0.6cqw));
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.fl-in { width: 100%; height: 100%; animation: fl-fade 1.2s ease var(--d, 0ms) backwards; }
@keyframes fl-fade { from { opacity: 0; transform: translateY(1.2cqw); } to { opacity: 1; transform: none; } }
.fl-drift { width: 100%; height: 100%; animation: fl-drift var(--dur, 18s) ease-in-out var(--delay, 0s) infinite; }
@keyframes fl-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(var(--dx), var(--dy)); }
}
.fl-item:hover .fl-drift { animation-play-state: paused; }

.acc-float .logo-tile {
  width: 100%; height: 100%;
  border-radius: 1.3cqw;
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 16px rgba(4,9,42,.22), 0 0 0 1px rgba(255,255,255,.5) inset;
  transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}
.acc-float .logo-tile img { max-width: 80%; max-height: 72%; width: auto; height: auto; }
.acc-float .tier-2 .logo-tile {
  opacity: .82;
  border-radius: 1.3cqw;
  box-shadow: 0 4px 10px rgba(4,9,42,.18);
}
.acc-float .fl-item:hover .logo-tile { opacity: 1; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(4,9,42,.28); }
@media (max-width: 575.98px) { .acc-float .logo-tile .tip { display: none; } }

/* ---------- Eyebrow badge (MYCPE ONE pill) ---------- */
.acc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #2A3343;
  background: #fff;
  border-radius: 500px;
}
.acc-eyebrow svg { flex: none; display: block; }