/* FlexDays demo section, shared by every page that has a <div data-flexdays-demo>.
   Self-contained: it only borrows the page's fonts, so it works on the landing,
   blog and tool pages alike. Markup comes from demo.js. */
.fd-demo {
  --fd-blue: #1679d7; --fd-blue-dk: #0e5fad; --fd-teal: #09bccc; --fd-success: #2EB872;
  --fd-dark: #1E1E24; --fd-mid: #6B6B76; --fd-border: #D9DCE1; --fd-bg: #F5F7FA;
  padding: 88px 0 96px; background: var(--fd-bg); overflow: hidden; scroll-margin-top: 80px;
  color: var(--fd-dark); text-align: left;
}
.fd-demo *, .fd-demo *::before, .fd-demo *::after { box-sizing: border-box; }
.fd-demo-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.fd-demo-head { text-align: center; }
.fd-demo-tag {
  display: inline-flex; padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; background: #e8f2fd; color: var(--fd-blue);
}
.fd-demo-title {
  margin: 14px 0 0; font-family: var(--font-display, inherit);
  font-size: clamp(28px, 4.5vw, 44px); font-weight: 800; line-height: 1.15; color: var(--fd-dark);
}
.fd-demo-gradient {
  background: linear-gradient(135deg, var(--fd-blue), var(--fd-teal));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.fd-demo-sub { max-width: 580px; margin: 14px auto 0; font-size: 17px; line-height: 1.75; color: var(--fd-mid); }

.fd-demo-tabs {
  display: flex; width: max-content; margin: 34px auto 0; padding: 5px; gap: 4px;
  background: #fff; border: 1px solid var(--fd-border); border-radius: 999px; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.fd-demo-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 0; border-radius: 999px;
  background: transparent; color: var(--fd-mid); cursor: pointer;
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 14px;
  transition: background-color .18s ease-out, color .18s ease-out, box-shadow .18s ease-out;
}
.fd-demo-tab svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fd-demo-tab:hover { color: var(--fd-dark); }
.fd-demo-tab[aria-selected="true"] {
  color: #fff; background: linear-gradient(135deg, var(--fd-blue), var(--fd-teal));
  box-shadow: 0 6px 18px rgba(22,121,215,.35);
}

.fd-demo-stage { position: relative; max-width: 960px; margin: 30px auto 0; }
.fd-demo-glow {
  position: absolute; inset: -12% -8%; z-index: 0; pointer-events: none; filter: blur(40px);
  background: radial-gradient(closest-side, rgba(22,121,215,.28), rgba(9,188,204,.16) 55%, transparent 75%);
  animation: fd-demo-breathe 6s ease-in-out infinite alternate;
}
@keyframes fd-demo-breathe { from { opacity: .7; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }

.fd-demo-frame {
  position: relative; z-index: 1; background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(13,37,63,.08);
  box-shadow: 0 24px 50px -22px rgba(22,121,215,.4), 0 10px 24px rgba(13,37,63,.1);
}
.fd-demo-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #fbfcfe; border-bottom: 1px solid var(--fd-border); }
.fd-demo-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.fd-demo-bar-label { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--fd-mid); }
.fd-demo-player { position: relative; aspect-ratio: 16 / 9; background: #0e1a2b; }
.fd-demo-player video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fd-demo-play {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 0; cursor: pointer; color: #fff; font-family: var(--font-display, inherit); font-weight: 700; font-size: 15px;
  background: radial-gradient(ellipse at center, rgba(14,26,43,.18), rgba(14,26,43,.38));
}
.fd-demo-play-icon {
  position: relative; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fd-blue); box-shadow: 0 10px 30px rgba(22,121,215,.55);
  transition: transform .18s ease-out, background-color .18s ease-out;
}
.fd-demo-play-icon::before {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.55); animation: fd-demo-ring 2.2s ease-out infinite;
}
@keyframes fd-demo-ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.fd-demo-play:hover .fd-demo-play-icon { transform: scale(1.08); background: var(--fd-blue-dk); }
.fd-demo-play:focus-visible { outline: 3px solid var(--fd-blue); outline-offset: -3px; }
.fd-demo-play-icon svg { width: 30px; height: 30px; margin-left: 4px; fill: #fff; }
.fd-demo-play-label { padding: 7px 16px; border-radius: 20px; background: rgba(14,26,43,.62); backdrop-filter: blur(6px); }

.fd-demo-float {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.10);
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 14px; color: var(--fd-dark); white-space: nowrap;
  animation: fd-demo-float 5s ease-in-out infinite alternate;
}
.fd-demo-float-dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.fd-demo-float-dot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fd-demo-float--a { top: 16%; left: -64px; }
.fd-demo-float--b { top: 44%; right: -72px; animation-delay: -1.6s; }
.fd-demo-float--c { bottom: 12%; left: -40px; animation-delay: -3.2s; }
@keyframes fd-demo-float { from { transform: translateY(-6px); } to { transform: translateY(6px); } }

.fd-demo-chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 30px auto 0; max-width: 900px; }
.fd-demo-chapter {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--fd-border); background: #fff; color: var(--fd-dark); cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  transition: border-color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out;
}
.fd-demo-chapter:hover { border-color: var(--fd-blue); transform: translateY(-1px); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.fd-demo-chapter time { color: var(--fd-blue); font-variant-numeric: tabular-nums; font-weight: 700; }

.fd-demo-cta { display: flex; justify-content: center; margin-top: 34px; }
.fd-demo-cta a {
  display: inline-flex; align-items: center; padding: 14px 30px; border-radius: 10px;
  background: var(--fd-blue); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 4px 18px rgba(22,121,215,.38); transition: transform .18s ease-out, background-color .18s ease-out;
}
.fd-demo-cta a:hover { background: var(--fd-blue-dk); transform: translateY(-2px); }

.fd-demo-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; }
.fd-demo-modal[hidden] { display: none; }
.fd-demo-backdrop { position: absolute; inset: 0; background: rgba(7,14,26,.86); backdrop-filter: blur(6px); }
.fd-demo-box {
  position: relative; width: min(1200px, 100%); aspect-ratio: 16 / 9; max-height: calc(100vh - 48px);
  border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 90px rgba(0,0,0,.6);
  animation: fd-demo-pop .25s cubic-bezier(.22,.61,.36,1);
}
@keyframes fd-demo-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.fd-demo-box video { display: block; width: 100%; height: 100%; background: #000; }
.fd-demo-close {
  position: absolute; top: 12px; right: 12px; z-index: 1; width: 42px; height: 42px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.16);
}
.fd-demo-close:hover { background: rgba(255,255,255,.3); }
.fd-demo-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

@media (max-width: 1100px) { .fd-demo-float { display: none; } }
@media (max-width: 600px) {
  .fd-demo { padding: 64px 0 72px; }
  .fd-demo-tab { padding: 9px 14px; font-size: 13px; }
  .fd-demo-play { gap: 10px; font-size: 13px; }
  .fd-demo-play-icon { width: 58px; height: 58px; }
  .fd-demo-play-icon svg { width: 22px; height: 22px; margin-left: 3px; }
  .fd-demo-chapter { font-size: 13px; padding: 7px 12px; }
  .fd-demo-modal { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-demo-glow, .fd-demo-float, .fd-demo-play-icon::before, .fd-demo-box { animation: none; }
}