/* DARACORP_LANDING_V13_ANIMATED_PRODUCT_TOUR_2026 */
.dc-hero-grid {
  grid-template-columns: minmax(0, 1.06fr) minmax(460px, .84fr) !important;
  gap: clamp(38px, 4vw, 68px) !important;
}

.dc-product-demo {
  --dc-demo-x: 80%;
  --dc-demo-y: 76%;
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  width: min(100%, 620px) !important;
  max-width: 620px !important;
  min-height: 0 !important;
  height: auto !important;
  justify-self: center;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dc-product-demo::before,
.dc-product-demo::after {
  display: none !important;
}

.dc-demo-window {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(213, 226, 243, .94);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 28px 60px rgba(0, 19, 60, .32), 0 2px 10px rgba(0, 19, 60, .16);
}

.dc-demo-topbar {
  display: flex;
  height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: #34506d;
  background: #fff;
  border-bottom: 1px solid #e6edf5;
  font-size: 9px;
  font-weight: 800;
}

.dc-demo-brand-mark {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(145deg, #1767ef, #123f9b);
  font-size: 8px;
  letter-spacing: -.04em;
}

.dc-demo-brand-name { color: #0b315d; font-size: 10px; }
.dc-demo-top-spacer { flex: 1; }
.dc-demo-step {
  padding: 4px 8px;
  border-radius: 999px;
  color: #124884;
  background: #edf5ff;
  font-size: 8px;
}

.dc-demo-stage {
  position: relative;
  height: calc(100% - 42px);
  overflow: hidden;
  color: #071f49;
  background: #f4f7fb;
}

.dc-demo-screen {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  transform: translateX(20px) scale(.985);
  transition: opacity .52s ease, transform .66s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}

.dc-demo-screen.is-active {
  z-index: 2;
  opacity: 1;
  transform: translateX(0) scale(1);
}

.dc-demo-screen.is-leaving {
  opacity: 0;
  transform: translateX(-18px) scale(.992);
}

.dc-demo-cursor {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: 23px;
  height: 26px;
  color: #072d64;
  filter: drop-shadow(0 2px 2px rgba(255,255,255,.85)) drop-shadow(0 3px 4px rgba(0,20,52,.3));
  transform: translate(calc(var(--dc-demo-x) - 11px), calc(var(--dc-demo-y) - 10px));
  transition: transform 1.05s cubic-bezier(.22, .75, .24, 1);
}

.dc-demo-cursor svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke: #fff; stroke-width: 1.2; }
.dc-demo-click-ring {
  position: absolute;
  z-index: 19;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border: 2px solid #ffbd2e;
  border-radius: 50%;
  opacity: 0;
  transform: translate(calc(var(--dc-demo-x) - 11px), calc(var(--dc-demo-y) - 11px)) scale(.25);
}

.dc-product-demo.is-clicking .dc-demo-click-ring { animation: dc-demo-ping .7s ease-out; }
@keyframes dc-demo-ping {
  0% { opacity: .9; transform: translate(calc(var(--dc-demo-x) - 11px), calc(var(--dc-demo-y) - 11px)) scale(.25); }
  100% { opacity: 0; transform: translate(calc(var(--dc-demo-x) - 11px), calc(var(--dc-demo-y) - 11px)) scale(2.25); }
}

.dc-demo-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 42px;
  padding-top: 12px;
  color: #dceaff;
  font-size: 11px;
  font-weight: 800;
}

.dc-demo-status { justify-self: start; }
.dc-demo-dots { display: flex; justify-self: center; gap: 8px; }
.dc-demo-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(147, 190, 255, .48);
  box-shadow: none;
  cursor: pointer;
}
.dc-demo-dot[aria-current="true"] { background: #ffbd2e; transform: scale(1.25); }
.dc-demo-loop { justify-self: end; color: #a8cbff; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

/* Shared miniature UI primitives. */
.dc-mini-nav {
  display: flex;
  height: 31px;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  color: #2e4966;
  background: #fff;
  border-bottom: 1px solid #e7edf3;
  font-size: 7px;
  font-weight: 800;
}
.dc-mini-nav strong { color: #075fe4; }
.dc-mini-nav span:last-child { margin-left: auto; }
.dc-mini-panel { border: 1px solid #dfe7ef; border-radius: 8px; background: #fff; box-shadow: 0 4px 10px rgba(19,52,88,.08); }
.dc-mini-btn { display: inline-grid; min-height: 22px; place-items: center; padding: 0 12px; border-radius: 5px; color: #fff; background: #075fe4; font-size: 7px; font-weight: 900; }
.dc-mini-btn.gold { color: #0b284e; background: #ffbd2e; }
.dc-mini-kicker { color: #ffbd2e; font-size: 6px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.dc-mini-progress { height: 5px; overflow: hidden; border-radius: 999px; background: #e4eaf1; }
.dc-mini-progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1565ea,#42a5ff); box-shadow: 0 0 8px rgba(21,101,234,.28); }

/* 1. Sign in. */
.dc-demo-login { display: grid; grid-template-columns: .92fr 1.08fr; background: #eef4fb; }
.dc-demo-login-story {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #031c49, #0751bd);
}
.dc-demo-login-story::after { content: ""; position: absolute; right: -54px; bottom: -70px; width: 180px; height: 180px; border: 1px solid rgba(78,158,255,.45); border-radius: 50%; box-shadow: 0 0 0 25px rgba(21,111,235,.09), 0 0 0 52px rgba(21,111,235,.06); }
.dc-demo-login-logo { margin-bottom: 30px; color: #fff; font-size: 12px; font-weight: 900; }
.dc-demo-login-logo b { display: inline-grid; width: 25px; height: 25px; margin-right: 7px; place-items: center; border-radius: 7px; background: #1968ef; font-size: 9px; }
.dc-demo-login-story h3 { max-width: 220px; margin: 0 0 11px; color: #fff; font-size: 22px; line-height: 1.08; }
.dc-demo-login-story p { max-width: 220px; margin: 0; color: #d8e7ff; font-size: 8px; line-height: 1.6; }
.dc-demo-login-card { display: grid; place-items: center; padding: 24px; }
.dc-demo-form { width: min(210px, 100%); padding: 22px; }
.dc-demo-form .shield { display: grid; width: 34px; height: 34px; margin: 0 auto 8px; place-items: center; border: 2px solid #1767ef; border-radius: 12px 12px 16px 16px; color: #1767ef; font-size: 14px; }
.dc-demo-form h3 { margin: 0 0 4px; color: #082c5a; text-align: center; font-size: 15px; }
.dc-demo-form p { margin: 0 0 14px; color: #75849a; text-align: center; font-size: 7px; }
.dc-demo-field { height: 27px; margin: 7px 0; padding: 8px 9px; border: 1px solid #ccd6e2; border-radius: 5px; color: #8a96a7; background: #fff; font-size: 7px; }
.dc-demo-form .dc-mini-btn { width: 100%; margin-top: 7px; }

/* 2. Dashboard. */
.dc-demo-dashboard { padding-bottom: 10px; background: #f4f7fb; }
.dc-demo-welcome { display: grid; grid-template-columns: 1.3fr repeat(3,.45fr); gap: 10px; align-items: center; margin: 12px 14px 10px; padding: 14px 16px; border-radius: 9px; color: #fff; background: linear-gradient(110deg,#06255a,#1564e9); }
.dc-demo-welcome h3 { margin: 4px 0 3px; color: #fff; font-size: 12px; }
.dc-demo-welcome p { margin: 0; color: #d7e7ff; font-size: 6px; }
.dc-demo-stat { border-left: 1px solid rgba(255,255,255,.22); text-align: center; font-size: 6px; }
.dc-demo-stat strong { display: block; color: #fff; font-size: 15px; }
.dc-demo-learning-head { display: flex; align-items: center; justify-content: space-between; margin: 0 14px 7px; font-size: 10px; }
.dc-demo-course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 14px; }
.dc-demo-course-row { display: grid; grid-template-columns: 68px 1fr; min-height: 74px; overflow: hidden; }
.dc-demo-cover { display: flex; justify-content: flex-end; flex-direction: column; padding: 9px; color: #fff; background: linear-gradient(145deg,#08274c,#164f82); font-size: 7px; font-weight: 900; }
.dc-demo-cover.goldline { border-top: 3px solid #ffbd2e; }
.dc-demo-course-body { padding: 8px; }
.dc-demo-course-body strong { display: block; min-height: 23px; font-size: 8px; line-height: 1.25; }
.dc-demo-course-body small { display: block; margin: 3px 0 7px; color: #728196; font-size: 6px; }
.dc-demo-course-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; color: #63748b; font-size: 6px; }

/* 3. Catalog. */
.dc-demo-catalog { background: #f7f9fc; }
.dc-demo-catalog-hero { display: grid; grid-template-columns: .85fr 1.15fr; gap: 14px; align-items: center; margin: 10px 14px; padding: 13px 15px; border-radius: 9px; color: #fff; background: linear-gradient(110deg,#052458,#1264ec); }
.dc-demo-catalog-hero h3 { margin: 3px 0; color: #fff; font-size: 13px; line-height: 1.1; }
.dc-demo-catalog-hero p { margin: 0; color: #d9e8ff; font-size: 6px; }
.dc-demo-searchbar { display: flex; height: 28px; align-items: center; justify-content: space-between; padding: 4px 5px 4px 10px; border-radius: 6px; color: #8190a1; background: #fff; font-size: 6px; }
.dc-demo-searchbar b { display: grid; height: 20px; min-width: 51px; place-items: center; border-radius: 4px; color: #092b51; background: #ffbd2e; }
.dc-demo-catalog-title { margin: 0 14px 6px; font-size: 10px; }
.dc-demo-filters { display: flex; gap: 5px; margin: 0 14px 7px; }
.dc-demo-filter { padding: 3px 7px; border: 1px solid #c9d9ec; border-radius: 999px; color: #0753bd; background: #fff; font-size: 5px; font-weight: 900; }
.dc-demo-filter.active { border-color: #075fe4; color: #fff; background: #075fe4; }
.dc-demo-catalog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 0 14px; }
.dc-demo-catalog-card { position: relative; min-height: 106px; overflow: hidden; }
.dc-demo-catalog-card.is-target { box-shadow: 0 0 0 2px #ffbd2e, 0 8px 15px rgba(4,48,105,.18); }
.dc-demo-catalog-image { height: 48px; background: linear-gradient(135deg,#0a315f,#1768ad); }
.dc-demo-catalog-image.alt { background: linear-gradient(135deg,#8b8a73,#d4c38b); }
.dc-demo-catalog-card div:last-child { padding: 7px; }
.dc-demo-catalog-card small { color: #637994; font-size: 5px; }
.dc-demo-catalog-card strong { display: block; margin-top: 4px; font-size: 7px; line-height: 1.2; }

/* 4. Course home. */
.dc-demo-coursehome { background: #f5f8fb; }
.dc-demo-course-head { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 9px 15px; color: #fff; background: linear-gradient(110deg,#062652,#0c4d9a); }
.dc-demo-course-head h3 { margin: 3px 0 0; color: #fff; font-size: 13px; }
.dc-demo-course-main { display: grid; grid-template-columns: 1.35fr .65fr; gap: 9px; padding: 11px 14px; }
.dc-demo-resume { display: flex; align-items: center; justify-content: space-between; padding: 10px; }
.dc-demo-resume strong { font-size: 9px; }
.dc-demo-outline { margin-top: 8px; overflow: hidden; }
.dc-demo-unit { display: flex; min-height: 30px; align-items: center; gap: 7px; padding: 0 9px; border-bottom: 1px solid #e3eaf1; font-size: 7px; font-weight: 800; }
.dc-demo-unit:last-child { border-bottom: 0; }
.dc-demo-unit span { margin-left: auto; color: #075fe4; }
.dc-demo-course-side { padding: 11px; }
.dc-demo-course-side h4 { margin: 0 0 8px; font-size: 9px; }
.dc-demo-side-link { margin: 8px 0; color: #0754bc; font-size: 7px; }
.dc-demo-grade { margin-top: 14px; padding: 10px; border-radius: 7px; color: #0b437e; background: #edf5ff; text-align: center; font-size: 7px; }

/* 5. Lesson. */
.dc-demo-lesson { display: grid; grid-template-columns: 125px 1fr; background: #f3f6fa; }
.dc-demo-outline-side { padding: 12px 8px; border-right: 1px solid #dbe4ed; background: #eef3f8; }
.dc-demo-outline-side h3 { margin: 0 4px 8px; font-size: 9px; }
.dc-demo-outline-item { margin-bottom: 6px; padding: 8px 7px; border: 1px solid #d9e3ec; border-radius: 6px; color: #3b536c; background: #fff; font-size: 6px; line-height: 1.3; }
.dc-demo-outline-item.active { border-left: 3px solid #ffbd2e; color: #082f61; background: #edf4fc; font-weight: 900; }
.dc-demo-lesson-main { padding: 10px 12px; }
.dc-demo-lesson-nav { display: grid; grid-template-columns: 1fr 82px; gap: 7px; margin-bottom: 8px; }
.dc-demo-lesson-nav div { display: grid; min-height: 24px; place-items: center; border: 1px solid #cddaea; border-radius: 5px; background: #fff; font-size: 6px; font-weight: 900; }
.dc-demo-lesson-nav div:last-child { border-color: #ffbd2e; background: #ffbd2e; }
.dc-demo-lesson-card { padding: 12px; }
.dc-demo-lesson-card h3 { margin: 4px 0 5px; color: #fff; font-size: 13px; }
.dc-demo-lesson-banner { margin-bottom: 8px; padding: 12px; border-radius: 8px; color: #fff; background: linear-gradient(130deg,#0a315d,#28537f); }
.dc-demo-lesson-banner p { margin: 0; color: #e3efff; font-size: 6px; }
.dc-demo-lesson-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.dc-demo-lesson-box { min-height: 72px; padding: 9px; }
.dc-demo-lesson-box strong { display: block; margin: 4px 0; font-size: 8px; }
.dc-demo-lesson-box p { margin: 0; color: #5d6f83; font-size: 6px; line-height: 1.45; }

/* 6. Certificate. */
.dc-demo-certificate { display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 35%,#fff 0,#f1f6fb 64%,#e7eef7 100%); }
.dc-demo-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dc-demo-confetti i { position: absolute; width: 5px; height: 11px; border-radius: 2px; background: #ffbd2e; transform: rotate(20deg); }
.dc-demo-confetti i:nth-child(1){left:12%;top:14%;background:#1767ef}.dc-demo-confetti i:nth-child(2){left:21%;top:28%;transform:rotate(-38deg)}.dc-demo-confetti i:nth-child(3){right:17%;top:18%;background:#1aa176}.dc-demo-confetti i:nth-child(4){right:10%;top:42%;transform:rotate(55deg)}.dc-demo-confetti i:nth-child(5){left:15%;bottom:18%;background:#1aa176}.dc-demo-confetti i:nth-child(6){right:24%;bottom:14%;background:#1767ef}
.dc-demo-certificate-paper { position: relative; width: min(410px, 86%); min-height: 210px; padding: 20px 32px; border: 8px solid #fff; outline: 1px solid #b9cce2; border-radius: 7px; background: #fff; box-shadow: 0 16px 32px rgba(9,44,82,.17); text-align: center; }
.dc-demo-certificate-paper::before { content: ""; position: absolute; inset: 9px; border: 2px solid #ffbd2e; pointer-events: none; }
.dc-demo-cert-logo { color: #0b315d; font-size: 10px; font-weight: 900; }
.dc-demo-cert-logo b { display: inline-grid; width: 23px; height: 23px; margin-right: 5px; place-items: center; border-radius: 6px; color: #fff; background: #1767ef; font-size: 8px; }
.dc-demo-certificate-paper h3 { margin: 11px 0 5px; color: #082d61; font-family: Georgia,serif; font-size: 20px; }
.dc-demo-certificate-paper p { margin: 3px 0; color: #536a83; font-size: 7px; }
.dc-demo-certificate-paper h4 { margin: 9px 0 4px; color: #082d61; font-size: 12px; }
.dc-demo-cert-seal { display: grid; width: 35px; height: 35px; margin: 10px auto 0; place-items: center; border: 3px double #ffbd2e; border-radius: 50%; color: #0a4eaa; font-size: 13px; font-weight: 900; }
.dc-demo-certificate .dc-mini-btn { position: absolute; right: 22px; bottom: 17px; }

/* Story-driven motion: every scene demonstrates an action, not just a transition. */
.dc-demo-screen.is-active .dc-mini-progress > span {
  animation: dc-demo-progress-fill 1.25s .38s cubic-bezier(.2,.75,.18,1) both;
}
@keyframes dc-demo-progress-fill { from { width: 0; } to { width: var(--dc-progress, 0%); } }

/* Sign-in: focus, type, authenticate. */
.dc-demo-login-card .dc-demo-form { opacity: 0; transform: translateY(14px) scale(.97); }
.dc-demo-login.is-active .dc-demo-form { animation: dc-demo-form-arrive .65s .14s cubic-bezier(.2,.82,.2,1) both; }
.dc-demo-typing-field { position: relative; overflow: hidden; color: #183a61; }
.dc-demo-typing-field span { display: inline-block; overflow: hidden; width: 0; white-space: nowrap; }
.dc-demo-typing-field i { display: none; width: 1px; height: 11px; margin-left: 1px; vertical-align: -2px; background: #1767ef; }
.dc-demo-login.is-active .dc-demo-typing-field { animation: dc-demo-field-focus .38s .62s ease both; }
.dc-demo-login.is-active .dc-demo-typing-field span { animation: dc-demo-type-name .72s .72s steps(6,end) both; }
.dc-demo-login.is-active .dc-demo-typing-field i { display: inline-block; animation: dc-demo-caret .45s .68s step-end 4; }
.dc-demo-password-field span { display: inline-block; opacity: 0; letter-spacing: .2em; transform: translateY(3px); }
.dc-demo-login.is-active .dc-demo-password-field { animation: dc-demo-field-focus .38s 1.46s ease both; }
.dc-demo-login.is-active .dc-demo-password-field span { animation: dc-demo-password-reveal .5s 1.56s steps(8,end) both; }
.dc-demo-login.is-active .dc-demo-form > .dc-mini-btn { animation: dc-demo-signin-confirm .72s 2.12s cubic-bezier(.2,.82,.2,1) both; }
@keyframes dc-demo-form-arrive { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dc-demo-type-name { to { width: 43px; } }
@keyframes dc-demo-caret { 50% { opacity: 0; } }
@keyframes dc-demo-password-reveal { from { clip-path: inset(0 100% 0 0); opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); } }
@keyframes dc-demo-field-focus { 0%,100% { border-color: #ccd6e2; box-shadow: none; } 45% { border-color: #1767ef; box-shadow: 0 0 0 2px rgba(23,103,239,.14); } }
@keyframes dc-demo-signin-confirm { 0% { transform: scale(1); } 45% { color: #082d61; background: #ffbd2e; transform: scale(1.04); box-shadow: 0 7px 15px rgba(255,189,46,.35); } 100% { transform: scale(1); } }

/* Dashboard: the workspace assembles, metrics count, and learning progress fills. */
.dc-demo-dashboard .dc-demo-welcome,
.dc-demo-dashboard .dc-demo-learning-head,
.dc-demo-dashboard .dc-demo-course-row { opacity: 0; transform: translateY(12px); }
.dc-demo-dashboard.is-active .dc-demo-welcome { animation: dc-demo-rise-in .58s .08s both; }
.dc-demo-dashboard.is-active .dc-demo-learning-head { animation: dc-demo-rise-in .48s .35s both; }
.dc-demo-dashboard.is-active .dc-demo-course-row { animation: dc-demo-rise-in .52s cubic-bezier(.2,.78,.2,1) both; }
.dc-demo-dashboard.is-active .dc-demo-course-row:nth-child(1) { animation-delay: .48s; }
.dc-demo-dashboard.is-active .dc-demo-course-row:nth-child(2) { animation-delay: .61s; }
.dc-demo-dashboard.is-active .dc-demo-course-row:nth-child(3) { animation-delay: .74s; }
.dc-demo-dashboard.is-active .dc-demo-course-row:nth-child(4) { animation-delay: .87s; }
.dc-demo-dashboard.is-active .dc-demo-stat strong { animation: dc-demo-stat-pop .6s .42s cubic-bezier(.16,1.35,.35,1) both; }
@keyframes dc-demo-rise-in { to { opacity: 1; transform: translateY(0); } }
@keyframes dc-demo-stat-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }

/* Catalog: cards arrive in sequence; the chosen course lifts and emits a scan. */
.dc-demo-catalog .dc-demo-catalog-hero,
.dc-demo-catalog .dc-demo-catalog-title,
.dc-demo-catalog .dc-demo-filters,
.dc-demo-catalog .dc-demo-catalog-card { opacity: 0; transform: translateY(10px); }
.dc-demo-catalog.is-active .dc-demo-catalog-hero { animation: dc-demo-rise-in .55s .08s both; }
.dc-demo-catalog.is-active .dc-demo-catalog-title,
.dc-demo-catalog.is-active .dc-demo-filters { animation: dc-demo-rise-in .42s .34s both; }
.dc-demo-catalog.is-active .dc-demo-catalog-card { animation: dc-demo-card-deal .52s cubic-bezier(.2,.78,.2,1) both; }
.dc-demo-catalog.is-active .dc-demo-catalog-card:nth-child(1) { animation-delay: .5s; }
.dc-demo-catalog.is-active .dc-demo-catalog-card:nth-child(2) { animation-delay: .64s; }
.dc-demo-catalog.is-active .dc-demo-catalog-card:nth-child(3) { animation-delay: .78s; }
.dc-demo-catalog-card.is-target::after { content:""; position:absolute; inset:-30% -55%; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%); transform:translateX(-70%); pointer-events:none; }
.dc-demo-catalog.is-active .dc-demo-catalog-card.is-target { animation: dc-demo-card-deal .52s .64s both, dc-demo-target-lift .78s 1.25s cubic-bezier(.2,.9,.2,1) both; }
.dc-demo-catalog.is-active .dc-demo-catalog-card.is-target::after { animation: dc-demo-card-scan .78s 1.35s ease-out both; }
@keyframes dc-demo-card-deal { from { opacity:0; transform:translateY(17px) rotateX(-6deg); } to { opacity:1; transform:translateY(0) rotateX(0); } }
@keyframes dc-demo-target-lift { 50% { transform:translateY(-7px) scale(1.025); box-shadow:0 0 0 3px #ffbd2e,0 14px 25px rgba(4,48,105,.25); } 100% { transform:translateY(-3px) scale(1.012); } }
@keyframes dc-demo-card-scan { to { transform:translateX(70%); } }

/* Course home: continue-learning callout and the outline build in order. */
.dc-demo-coursehome .dc-demo-course-head,
.dc-demo-coursehome .dc-demo-resume,
.dc-demo-coursehome .dc-demo-course-side,
.dc-demo-coursehome .dc-demo-unit { opacity: 0; transform: translateY(10px); }
.dc-demo-coursehome.is-active .dc-demo-course-head { animation: dc-demo-rise-in .48s .06s both; }
.dc-demo-coursehome.is-active .dc-demo-resume { animation: dc-demo-rise-in .45s .3s both; }
.dc-demo-coursehome.is-active .dc-demo-course-side { animation: dc-demo-rise-in .5s .42s both; }
.dc-demo-coursehome.is-active .dc-demo-unit { animation: dc-demo-outline-reveal .38s cubic-bezier(.2,.8,.2,1) both; }
.dc-demo-coursehome.is-active .dc-demo-unit:nth-child(1) { animation-delay:.52s; }
.dc-demo-coursehome.is-active .dc-demo-unit:nth-child(2) { animation-delay:.66s; }
.dc-demo-coursehome.is-active .dc-demo-unit:nth-child(3) { animation-delay:.8s; }
.dc-demo-coursehome.is-active .dc-demo-unit:nth-child(4) { animation-delay:.94s; }
@keyframes dc-demo-outline-reveal { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }

/* Lesson: progress advances while the learning blocks construct themselves. */
.dc-demo-lesson-nav { grid-template-columns: 1fr 82px; }
.dc-demo-lesson-nav > div { display: grid; min-height: 24px; place-items: center; border: 1px solid #cddaea; border-radius: 5px; background: #fff; font-size: 6px; font-weight: 900; }
.dc-demo-lesson-nav > div:first-child { grid-template-columns:auto minmax(45px,1fr) auto; gap:6px; padding:0 8px; }
.dc-demo-lesson-nav > div:last-child { border-color: #ffbd2e; background: #ffbd2e; }
.dc-demo-lesson-progress { width:100%; height:4px; overflow:hidden; border:0 !important; border-radius:999px !important; background:#dfe7f1 !important; }
.dc-demo-lesson-progress i { display:block; width:0; height:100%; border-radius:inherit; background:#1767ef; }
.dc-demo-lesson .dc-demo-outline-item,
.dc-demo-lesson .dc-demo-lesson-nav,
.dc-demo-lesson .dc-demo-lesson-banner,
.dc-demo-lesson .dc-demo-lesson-box { opacity:0; transform:translateY(10px); }
.dc-demo-lesson.is-active .dc-demo-outline-item { animation:dc-demo-outline-reveal .38s both; }
.dc-demo-lesson.is-active .dc-demo-outline-item:nth-child(2){animation-delay:.08s}.dc-demo-lesson.is-active .dc-demo-outline-item:nth-child(3){animation-delay:.18s}.dc-demo-lesson.is-active .dc-demo-outline-item:nth-child(4){animation-delay:.28s}.dc-demo-lesson.is-active .dc-demo-outline-item:nth-child(5){animation-delay:.38s}
.dc-demo-lesson.is-active .dc-demo-lesson-nav { animation:dc-demo-rise-in .42s .22s both; }
.dc-demo-lesson.is-active .dc-demo-lesson-progress i { animation:dc-demo-progress-fill 1.25s .58s cubic-bezier(.2,.75,.18,1) both; }
.dc-demo-lesson.is-active .dc-demo-lesson-banner { animation:dc-demo-rise-in .5s .58s both; }
.dc-demo-lesson.is-active .dc-demo-lesson-box:first-child { animation:dc-demo-rise-in .48s .82s both; }
.dc-demo-lesson.is-active .dc-demo-lesson-box:last-child { animation:dc-demo-rise-in .48s .98s both; }

/* Certificate: it rises out of the frame, settles, stamps, then celebrates. */
.dc-demo-certificate-paper { opacity:0; transform:translateY(125%) rotateX(18deg) scale(.82); transform-origin:50% 100%; }
.dc-demo-certificate.is-active .dc-demo-certificate-paper { animation:dc-demo-certificate-pop 1.08s .12s cubic-bezier(.14,.86,.22,1.16) both; }
.dc-demo-certificate.is-active .dc-demo-cert-seal { animation:dc-demo-seal-stamp .62s 1.12s cubic-bezier(.12,1.4,.3,1) both; }
.dc-demo-certificate.is-active .dc-mini-btn { animation:dc-demo-view-cert .5s 1.5s both; }
.dc-demo-confetti i { top:-24px; opacity:0; animation:none; }
.dc-demo-certificate.is-active .dc-demo-confetti i { animation:dc-demo-confetti-fall 1.75s cubic-bezier(.18,.7,.3,1) both; }
.dc-demo-confetti i:nth-child(1){--dc-x:12%;--dc-drift:38px;--dc-spin:420deg;animation-delay:.72s!important;background:#1767ef}.dc-demo-confetti i:nth-child(2){--dc-x:21%;--dc-drift:-26px;--dc-spin:-500deg;animation-delay:.86s!important}.dc-demo-confetti i:nth-child(3){--dc-x:82%;--dc-drift:-34px;--dc-spin:390deg;animation-delay:.76s!important;background:#1aa176}.dc-demo-confetti i:nth-child(4){--dc-x:90%;--dc-drift:20px;--dc-spin:560deg;animation-delay:1.02s!important}.dc-demo-confetti i:nth-child(5){--dc-x:15%;--dc-drift:-19px;--dc-spin:-360deg;animation-delay:1.08s!important;background:#1aa176}.dc-demo-confetti i:nth-child(6){--dc-x:76%;--dc-drift:29px;--dc-spin:470deg;animation-delay:.92s!important;background:#1767ef}.dc-demo-confetti i:nth-child(7){--dc-x:34%;--dc-drift:20px;--dc-spin:620deg;animation-delay:.7s!important;background:#ef5b71}.dc-demo-confetti i:nth-child(8){--dc-x:65%;--dc-drift:-36px;--dc-spin:-440deg;animation-delay:.82s!important;background:#ffbd2e}.dc-demo-confetti i:nth-child(9){--dc-x:46%;--dc-drift:-14px;--dc-spin:530deg;animation-delay:.98s!important;background:#1767ef}.dc-demo-confetti i:nth-child(10){--dc-x:56%;--dc-drift:24px;--dc-spin:-570deg;animation-delay:.74s!important;background:#1aa176}.dc-demo-confetti i:nth-child(11){--dc-x:27%;--dc-drift:34px;--dc-spin:480deg;animation-delay:1.16s!important;background:#ffbd2e}.dc-demo-confetti i:nth-child(12){--dc-x:71%;--dc-drift:-22px;--dc-spin:-520deg;animation-delay:1.12s!important;background:#ef5b71}
@keyframes dc-demo-certificate-pop { 0%{opacity:0;transform:translateY(125%) rotateX(18deg) scale(.82)} 58%{opacity:1;transform:translateY(-7%) rotateX(-2deg) scale(1.025)} 78%{transform:translateY(3%) rotateX(0) scale(.99)} 100%{opacity:1;transform:translateY(0) rotateX(0) scale(1)} }
@keyframes dc-demo-seal-stamp { 0%{opacity:0;transform:scale(2.6) rotate(-24deg)} 62%{opacity:1;transform:scale(.86) rotate(5deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes dc-demo-view-cert { from{opacity:0;transform:translateY(12px) scale(.92)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes dc-demo-confetti-fall { 0%{left:var(--dc-x);top:-24px;opacity:0;transform:translateX(0) rotate(0)} 12%{opacity:1} 100%{left:var(--dc-x);top:108%;opacity:.9;transform:translateX(var(--dc-drift)) rotate(var(--dc-spin))} }

@media (max-width: 1120px) {
  .dc-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, .82fr) !important; gap: 36px !important; }
  .dc-product-demo { max-width: 570px !important; }
}

@media (max-width: 980px) {
  .dc-hero-grid { grid-template-columns: 1fr !important; }
  .dc-product-demo { width: min(100%, 680px) !important; max-width: 680px !important; margin: 2px auto 0; }
}

@media (max-width: 680px) {
  .dc-product-demo { display: block !important; width: 100% !important; margin-top: 10px; }
  .dc-demo-window { border-radius: 12px; }
  .dc-demo-topbar { height: 34px; }
  .dc-demo-stage { height: calc(100% - 34px); }
  .dc-demo-footer { grid-template-columns: 1fr; justify-items: center; }
  .dc-demo-status, .dc-demo-loop { display: none; }
  .dc-demo-login-story { padding: 18px; }
  .dc-demo-login-story h3 { font-size: 15px; }
  .dc-demo-login-logo { margin-bottom: 14px; }
  .dc-demo-course-grid { grid-template-columns: 1fr; }
  .dc-demo-course-row:nth-child(n+3) { display: none; }
  .dc-demo-catalog-grid { grid-template-columns: repeat(2,1fr); }
  .dc-demo-catalog-card:nth-child(3) { display: none; }
  .dc-demo-lesson { grid-template-columns: 92px 1fr; }
  .dc-demo-certificate-paper { min-height: 145px; padding: 12px 20px; border-width: 5px; }
  .dc-demo-certificate-paper h3 { margin-top: 7px; font-size: 14px; }
  .dc-demo-certificate-paper h4 { margin: 5px 0; font-size: 9px; }
  .dc-demo-cert-seal { width: 27px; height: 27px; margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-demo-screen, .dc-demo-cursor { transition: none !important; }
  .dc-demo-click-ring { display: none !important; }
  .dc-demo-screen *, .dc-demo-screen *::before, .dc-demo-screen *::after { animation-duration: .001ms !important; animation-delay: 0s !important; }
}