/* merged — regenerate via dev-tools/merge-critical-css.php */

/* ==== rsb-course-cards.css ==== */
/* ============================================================
   Course Design Cards — faithful RSB port
   Palette + structure mirror the original component:
   .card > .card-header (.date) / .card-body (h3, p, .progress)
          / .card-footer (ul avatars + .btn-add, .btn-countdown)
   Everything is scoped under .rsb-course-grid so the generic
   token names (--bg-dark, --color-white, .card, .progress, …)
   can never leak into or collide with the rest of the site CSS.
   ============================================================ */
.rsb-course-grid{
  --clr-blue:#1890ff;
  --clr-green:#01c3a8;
  --clr-orange:#ffb741;
  --clr-red:#a63d2a;
  --bg-dark:#232228;
  --bg-footer:#151419;
  --color-white:#fff;
  --color-gray-light:#ddd;
  --color-gray-medium:#363636;
  --color-gray-dark:#292929;
  --color-gray-very-dark:#222127;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,280px));
  justify-content:center;
  gap:30px 28px;
  margin:26px auto 18px;
}
.rsb-course-grid,.rsb-course-grid *{box-sizing:border-box}

/* ---------- card ---------- */
.rsb-course-grid .card{
  --card-accent:var(--clr-blue);
  --card-rgb:24,144,255;
  position:relative;
  display:flex;
  min-width:0;
  min-height:280px;
  flex-direction:column;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:32px;
  color:var(--color-white);
  --card-surface:
    radial-gradient(ellipse at 100% 0%,rgba(var(--card-rgb),.48) 0%,rgba(var(--card-rgb),.17) 33%,rgba(var(--card-rgb),0) 65%) padding-box,
    linear-gradient(var(--bg-footer),var(--bg-footer)) padding-box,
    linear-gradient(225deg,var(--card-accent) 0%,#29282e 38%,#1d1c21 70%) border-box;
  background:var(--card-surface);
  box-shadow:0 22px 24px -12px rgba(0,0,0,.75),0 7px 12px -7px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .25s ease,box-shadow .25s ease;
}
.rsb-course-grid .card:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 28px -12px rgba(0,0,0,.8),0 8px 14px -7px rgba(0,0,0,.65);
}
.rsb-course-grid .card.green{--card-accent:var(--clr-green);--card-rgb:1,195,168}
.rsb-course-grid .card.orange{--card-accent:var(--clr-orange);--card-rgb:255,183,65}
.rsb-course-grid .card.red{--card-accent:var(--clr-red);--card-rgb:166,61,42}
.rsb-course-grid .card.blue{--card-accent:var(--clr-blue);--card-rgb:24,144,255}

/* Backlight sits on a wrapper so the opaque card covers the glow centre
   and only the halo spills out. Card fill colours stay on .card. */
.rsb-course-grid .card-beam{
  position:relative;
  isolation:isolate;
  min-width:0;
  border-radius:32px;
}
.rsb-course-grid .card-beam::before,
.rsb-course-grid .card-beam::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(ellipse 42% 18% at 22% 0%, rgba(var(--card-rgb), .95), transparent 72%),
    radial-gradient(ellipse 36% 14% at 78% 2%, rgba(var(--card-rgb), .72), transparent 70%),
    radial-gradient(ellipse 14% 42% at 100% 38%, rgba(var(--card-rgb), .8), transparent 72%),
    radial-gradient(ellipse 16% 36% at 100% 74%, rgba(var(--card-rgb), .55), transparent 70%),
    radial-gradient(ellipse 48% 16% at 68% 100%, rgba(var(--card-rgb), .9), transparent 72%),
    radial-gradient(ellipse 34% 18% at 24% 100%, rgba(var(--card-rgb), .6), transparent 70%),
    radial-gradient(ellipse 14% 40% at 0% 62%, rgba(var(--card-rgb), .75), transparent 72%),
    radial-gradient(ellipse 12% 28% at 0% 28%, rgba(var(--card-rgb), .5), transparent 70%);
}
.rsb-course-grid .card-beam::before{
  inset:-12px;
  filter:blur(5px);
  opacity:.72;
  animation:rsb-beam-breathe 3.6s ease-in-out infinite;
}
.rsb-course-grid .card-beam::after{
  inset:-34px;
  filter:blur(22px);
  opacity:.42;
  animation:rsb-beam-bloom 4.8s ease-in-out infinite;
}
.rsb-course-grid .card-beam:has(.card){--card-rgb:24,144,255}
.rsb-course-grid .card-beam:has(.card.green){--card-rgb:1,195,168}
.rsb-course-grid .card-beam:has(.card.orange){--card-rgb:255,183,65}
.rsb-course-grid .card-beam:has(.card.red){--card-rgb:166,61,42}
.rsb-course-grid .card-beam:has(.card.blue){--card-rgb:24,144,255}
.rsb-course-grid .card-beam:has(.card.violet){--card-rgb:155,109,255}

/* ---------- header: date + ellipsis ---------- */
.rsb-course-grid .card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:12px 18px 0;
  border:0;
  border-radius:0;
  background:transparent;
}
.rsb-course-grid .date{
  color:var(--color-gray-light);
  font-size:.72rem;
  font-weight:400;
  line-height:1.6;
  letter-spacing:0;
}
.rsb-course-grid .card-menu{
  display:grid;
  width:28px;
  height:28px;
  flex:none;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:var(--color-white);
  background:transparent;
  font-size:.75rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease;
}
.rsb-course-grid .card-menu:hover{background:rgba(255,255,255,.08)}
.rsb-course-grid :is(a,button):focus-visible{outline:2px solid #fff!important;outline-offset:3px}

/* ---------- body: title, copy, progress ---------- */
.rsb-course-grid .card-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  padding:22px 18px 16px;
  text-align:center;
  background:transparent;
}
.rsb-course-grid .card-body h3{
  margin:0 0 6px;
  color:var(--color-white);
  font-size:1.08rem;
  font-weight:700;
  line-height:1.55;
  letter-spacing:0;
  text-transform:none;
}
.rsb-course-grid .card-body h3 a{color:inherit;text-decoration:none}
.rsb-course-grid .card-body h3 a:hover{color:inherit;text-decoration:underline;text-underline-offset:4px}
.rsb-course-grid .card-body p{
  margin:0 0 16px;
  color:var(--color-gray-light);
  font-size:.74rem;
  line-height:1.85;
}

.rsb-course-grid .progress{
  display:grid;
  flex:none;
  grid-template-columns:minmax(0,1fr);
  height:auto;
  gap:6px;
  margin: auto 0 0;
  overflow:visible;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  font-size:.72rem;
  line-height:1.35;
  color:var(--color-white);
  text-align:start;
}
.rsb-course-grid .progress > span{
  font-weight:600;
  white-space:nowrap;
}
.rsb-course-grid .progress > span:last-child{
  color:var(--color-white);
  font-weight:400;
  text-align:end;
}
.rsb-course-grid .progress-bar{
  position:relative;
  display:block;
  width:100%;
  height:5px;
  min-height:0;
  margin:0;
  overflow:hidden;
  border-radius:99px;
  background:var(--color-gray-medium);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.25);
}
.rsb-course-grid .progress-bar::after{
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:var(--progress,0%);
  border-radius:inherit;
  background:var(--card-accent);
  content:"";
}

/* ---------- footer: avatars + countdown pill ---------- */
.rsb-course-grid .card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding:10px 18px;
  border:0;
  border-radius:0;
  background:var(--bg-footer);
}
.rsb-course-grid .card-footer ul{
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
  direction:ltr;
}
.rsb-course-grid .card-footer ul li{display:flex}
.rsb-course-grid .card-footer ul li+li{margin-left:-6px}
.rsb-course-grid .avatar{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  color:var(--color-white);
  background:var(--color-gray-dark);
  font-size:.8rem;
  box-shadow:0 0 0 2px var(--bg-footer);
}
.rsb-course-grid .btn-add{
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--card-accent);
  font-size:.65rem;
  text-decoration:none;
  box-shadow:0 0 0 2px var(--bg-footer);
  transition:background .2s ease,color .2s ease;
}
.rsb-course-grid .orange .btn-add{color:#151419}
.rsb-course-grid .btn-add:hover{color:var(--bg-footer);background:var(--color-white)}
.rsb-course-grid .btn-countdown{
  display:inline-flex;
  min-height:36px;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  border-radius:99px;
  color:var(--color-white);
  background:var(--bg-dark);
  font-size:.72rem;
  font-weight:400;
  line-height:1.5;
  white-space:nowrap;
  text-decoration:none;
  transition:background .2s ease;
}
.rsb-course-grid .btn-countdown:hover{
  color:var(--color-white);
  background:#313037;
  text-decoration:none;
}

/* ---------- dark theme: cards stay solid, shadows deepen ---------- */
[data-theme="dark"] .rsb-course-grid .card{
  color:var(--color-white)!important;
  border-color:transparent!important;
  background:var(--card-surface)!important;
  box-shadow:0 22px 24px -12px rgba(0,0,0,.85),0 7px 12px -7px rgba(0,0,0,.7);
}
[data-theme="dark"] .rsb-course-grid .card:hover{box-shadow:0 26px 28px -12px rgba(0,0,0,.9),0 8px 14px -7px rgba(0,0,0,.75)}
[data-theme="dark"] .rsb-course-grid .card .card-header{background:transparent!important;border-color:transparent!important}
[data-theme="dark"] .rsb-course-grid .card .card-body{color:var(--color-gray-light)!important}
[data-theme="dark"] .rsb-course-grid .card .card-footer{background:var(--bg-footer)!important;border-color:transparent!important}
[data-theme="dark"] .rsb-course-grid .progress{background:transparent!important}
[data-theme="dark"] .rsb-course-grid .progress-bar{background:var(--color-gray-medium)!important}
[data-theme="dark"] .rsb-course-grid .card-body h3 a,
[data-theme="dark"] .rsb-course-grid .btn-countdown,
[data-theme="dark"] .rsb-course-grid .btn-add{color:var(--color-white)!important}
[data-theme="dark"] .rsb-course-grid .date,
[data-theme="dark"] .rsb-course-grid .card-body p{color:var(--color-gray-light)!important}
[data-theme="dark"] .rsb-course-grid .orange .btn-add,
[data-theme="dark"] .rsb-course-grid .btn-add:hover{color:var(--bg-footer)!important}

.rsb-course-grid .card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  padding:2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    conic-gradient(from var(--beam-angle, 0deg),
      transparent 0%, transparent 54%,
      rgba(255,255,255,.15) 60%,
      rgba(255,255,255,.85) 66%,
      rgba(var(--card-rgb),.95) 70%,
      rgba(var(--card-rgb),.35) 76%,
      transparent 84%, transparent 100%),
    radial-gradient(ellipse 46% 28% at 18% 0%, rgba(var(--card-rgb),.9), transparent 70%),
    radial-gradient(ellipse 18% 46% at 100% 32%, rgba(var(--card-rgb),.75), transparent 70%),
    radial-gradient(ellipse 50% 22% at 70% 100%, rgba(var(--card-rgb),.8), transparent 70%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.85;
  animation:rsb-beam-spin 3.3s linear infinite;
}
.rsb-course-grid .card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.07) 48%,transparent 61%);
  background-size:250% 100%;
  opacity:0;
}
.rsb-course-grid .card:is(:hover,:focus-within){
  transform:translateY(-5px);
  box-shadow:0 26px 30px -13px rgba(0,0,0,.8),0 0 24px -8px rgba(var(--card-rgb),.3);
}
.rsb-course-grid .card:is(:hover,:focus-within)::before{opacity:1}
.rsb-course-grid .card:is(:hover,:focus-within)::after{animation:rsb-card-sheen .85s ease-out}
.rsb-course-grid .card .avatar{transition:transform .3s ease,box-shadow .3s ease}
.rsb-course-grid .card:is(:hover,:focus-within) .avatar{transform:translateY(-2px);box-shadow:0 0 0 2px var(--bg-footer),0 0 12px rgba(var(--card-rgb),.3)}
.rsb-course-grid .btn-countdown{border:1px solid rgba(var(--card-rgb),.18);transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.rsb-course-grid .btn-countdown:is(:hover,:focus-visible){border-color:rgba(var(--card-rgb),.7);box-shadow:0 0 14px -5px rgba(var(--card-rgb),.45)}
@property --beam-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes rsb-beam-spin{to{--beam-angle:360deg}}
@keyframes rsb-beam-breathe{
  0%,100%{opacity:.5;transform:scale(.97,1.03)}
  50%{opacity:.95;transform:scale(1.05,.96)}
}
@keyframes rsb-beam-bloom{
  0%,100%{opacity:.26;transform:scale(.94,1.02)}
  50%{opacity:.58;transform:scale(1.05,.96)}
}
@keyframes rsb-card-sheen{0%{background-position:120% 0;opacity:0}30%,70%{opacity:1}100%{background-position:-20% 0;opacity:0}}
@keyframes rsb-card-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:no-preference){
  .rsb-course-grid .card{animation:rsb-card-arrive .55s ease-out backwards}
  .rsb-course-grid .card:nth-child(2){animation-delay:.06s}
  .rsb-course-grid .card:nth-child(3){animation-delay:.12s}
  .rsb-course-grid .card:nth-child(4){animation-delay:.18s}
}

/* ---------- responsive ---------- */
@media (max-width:575px){
  .rsb-course-grid{grid-template-columns:minmax(0,280px);gap:26px}
}
@media (prefers-reduced-motion:reduce){
  .rsb-course-grid .card,
  .rsb-course-grid .card-menu,
  .rsb-course-grid .btn-add,
  .rsb-course-grid .btn-countdown{transition:none}
  .rsb-course-grid .card:is(:hover,:focus-within),
  .rsb-course-grid .card:is(:hover,:focus-within) .avatar{transform:none}
  .rsb-course-grid .card::before,
  .rsb-course-grid .card::after,
  .rsb-course-grid .card-beam::before,
  .rsb-course-grid .card-beam::after,
  .rsb-course-grid .card .avatar{animation:none!important;transition:none}
}

/* ==== rsb-offer.css ==== */
/* Homepage: service cards + project path share one grid.
   Scoped to .rsb-offer so company-page course cards stay unchanged. */

.rsb-offer{
  --offer-ink:#151419;
  --offer-card:#232228;
  --offer-line:#3a3942;
  --offer-muted:#c8c7d0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  column-gap:28px;
  row-gap:4px;
  align-items:stretch;
  margin:8px 0 10px;
}

.rsb-offer__head,
.rsb-offer__aside-head{min-width:0}
.rsb-offer__cards{min-width:0}
.rsb-offer__rail{
  min-width:0;
  display:flex;
}

.rsb-offer .rsb-services-heading{
  margin:0 0 16px;
}
.rsb-offer .rsb-services-heading h2{
  margin:8px 0 8px!important;
  font-size:1.85rem!important;
  line-height:1.35!important;
  letter-spacing:0;
}
.rsb-offer .rsb-services-heading p{
  margin:0!important;
  max-width:38rem;
  font-size:.95rem;
  line-height:1.75;
}
.rsb-offer .rsb-services-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  font-size:.78rem;
  font-weight:700;
}
.rsb-offer__aside-heading h2{font-size:1.55rem!important}
.rsb-offer__aside-heading p{max-width:none}

.rsb-offer .rsb-course-grid{
  width:100%;
  margin:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  justify-content:stretch;
  gap:22px 20px;
}
.rsb-offer .rsb-course-grid .card{
  width:100%;
  min-height:268px;
}

.rsb-process{
  position:relative;
  isolation:isolate;
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:space-between;
  gap:0;
  width:100%;
  margin:0;
  padding:26px 22px 18px;
  list-style:none;
  overflow:hidden;
  border-radius:32px;
  color:#fff;
  background:
    radial-gradient(ellipse at 100% 0%,rgba(1,195,168,.42) 0%,rgba(1,195,168,.12) 34%,transparent 64%),
    linear-gradient(160deg,#1d1c22 0%,var(--offer-ink) 58%);
  box-shadow:0 22px 24px -12px rgba(0,0,0,.55),0 7px 12px -7px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
}
.rsb-process::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  padding:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(200deg,rgba(1,195,168,.85),rgba(255,183,65,.35) 28%,rgba(24,144,255,.15) 62%,rgba(255,255,255,.08));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
.rsb-process__step{
  position:relative;
  z-index:1;
  display:flex;
  flex:1 1 0;
  align-items:flex-start;
  gap:14px;
  min-height:0;
  padding:8px 0 18px;
}
.rsb-process__step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:46px;
  bottom:0;
  inset-inline-start:17px;
  width:2px;
  border-radius:99px;
  background:linear-gradient(180deg,#01c3a8,#ffb741 55%,#1890ff);
  opacity:.7;
}
.rsb-process__mark{
  position:relative;
  z-index:1;
  display:grid;
  flex:none;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#29282e;
  box-shadow:0 0 0 4px var(--offer-ink),0 0 0 5px rgba(255,255,255,.08);
  font-size:.95rem;
}
.rsb-process__step:nth-child(1) .rsb-process__mark{color:#01c3a8}
.rsb-process__step:nth-child(2) .rsb-process__mark{color:#ffb741}
.rsb-process__step:nth-child(3) .rsb-process__mark{color:#69b7ff}
.rsb-process__body{min-width:0;padding-top:2px}
.rsb-process__num{
  display:block;
  margin-bottom:2px;
  color:#8d8c96;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
}
.rsb-process h3{
  margin:0 0 6px;
  color:#fff!important;
  font-size:1rem!important;
  font-weight:700;
  line-height:1.55;
}
.rsb-process p{
  margin:0;
  color:var(--offer-muted)!important;
  font-size:.82rem;
  line-height:1.8;
}

[data-theme="dark"] .rsb-process{
  box-shadow:0 22px 28px -12px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .rsb-offer .rsb-services-heading h2{color:var(--rsb-text,#f5f5f7)!important}
[data-theme="dark"] .rsb-offer .rsb-services-heading h2 strong{color:var(--rsb-blue,#7ec8ff)!important}
[data-theme="dark"] .rsb-offer .rsb-services-heading p{color:var(--rsb-text-muted,#c5c5ce)!important}

@media (max-width:991.98px){
  .rsb-offer{grid-template-columns:minmax(0,1fr)}
  .rsb-offer__head{order:1}
  .rsb-offer__cards{order:2}
  .rsb-offer__aside-head{order:3;margin-top:28px}
  .rsb-offer__rail{order:4}
  .rsb-process{min-height:0}
  .rsb-process__step{flex:none}
}
@media (max-width:575px){
  .rsb-offer .rsb-course-grid{grid-template-columns:minmax(0,1fr)}
  .rsb-offer .rsb-services-heading h2,
  .rsb-offer__aside-heading h2{font-size:1.45rem!important}
  .rsb-process{padding:20px 16px 12px;border-radius:24px}
}
@media (prefers-reduced-motion:reduce){
  .rsb-process{transition:none}
}