.df-shot{width:100%;border-radius:12px;box-shadow:0 12px 36px rgba(31,35,41,.16);border:1px solid #E5E7EB;background:#fff}
.df-missing{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:260px;color:#6B7280;
  font:15px Arial,sans-serif;background:#F9FAFB;border:2px dashed #D1D5DB;box-shadow:none;text-align:center}
.df-group{margin:70px 0 10px}.df-group h2{font-size:28px;font-weight:700;margin:0}
.df-group p{margin:6px 0 0;color:#646464}
.df-feature{padding:34px 0;border-bottom:1px solid #EEF0F3}
.df-feature:last-child{border-bottom:0}
.df-badge{display:inline-block;font:700 12px Arial,sans-serif;letter-spacing:.02em;color:#fff;
  background:linear-gradient(90deg,#533EFF,#740FD7);border-radius:12px;padding:3px 10px;margin-bottom:10px}
.df-feature h3{font-size:26px;line-height:1.25;margin:0 0 8px}
.df-feature .df-sub{font-size:17px;color:#533EFF;margin-bottom:10px}
.df-feature ul{margin:14px 0 0;padding:0}.df-feature li{list-style:none;padding-left:26px;position:relative;margin:7px 0;color:#454545}
.df-feature li:before{content:"\2713";font-weight:700;color:#740FD7;position:absolute;left:2px;top:0}
.df-scheme{margin:24px 0 0;padding:18px;border-radius:12px;background:#fff;border:1px solid #EEF0F3}
.df-scheme img{width:100%}.df-scheme figcaption{font-size:14px;color:#646464;margin-top:8px;text-align:center}
.df-code{background:#1E1F2B;color:#E6E6F0;border-radius:12px;padding:18px 20px;font:13px/1.55 Consolas,monospace;white-space:pre;overflow:auto;box-shadow:0 12px 36px rgba(31,35,41,.16)}
.df-gallery{aspect-ratio:16/10;object-fit:cover;object-position:left top}
.df-code .k{color:#B7A2FF}.df-code .s{color:#9BE9A8}.df-code .c{color:#8A8FA3}
.df-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:26px}
.df-more div{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:14px 16px;color:#454545}
.df-tiles{display:grid;gap:14px}.df-tiles div{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:22px 24px;font:600 20px Arial,sans-serif;color:#1D2124;box-shadow:0 8px 24px rgba(31,35,41,.08);border-left:6px solid #740FD7}
.df-steps .single-choose{min-height:100%}.df-steps .choose-icon span{font:700 24px Arial,sans-serif;color:#533EFF}

html{scroll-behavior:smooth;scroll-padding-top:100px} .df-shot{height:auto} .df-req td{padding:14px;vertical-align:top}.df-req td:first-child{font-weight:600;width:32%}.df-steps>[class*=col-]{margin-bottom:24px}.df-feature img{max-width:100%} .df-lightbox{border:0;padding:48px 16px 16px;background:#fff;max-width:96vw;max-height:96vh}.df-lightbox::backdrop{background:rgba(0,0,0,.85)}.df-lightbox img{display:block;max-width:90vw;max-height:80vh;object-fit:contain}.df-lightbox button{position:absolute;right:12px;top:8px;font-size:24px;background:#fff;border:0;cursor:pointer}.df-lightbox a{display:block;text-align:center;margin-top:8px}@media(max-width:767px){.df-feature h3{font-size:23px}.df-feature [class*=col-]{margin-bottom:20px}.df-group{margin-top:36px}.df-req td{padding:8px;font-size:14px}.df-scheme{padding:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* One sticky mobile row: logo at left, MeanMenu toggle at right. */
@media (max-width: 991px) {
  body { padding-top: 72px; }
  .df-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    min-height: 72px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(31,35,41,.08);
  }
  .df-site-header .mobile-logo-area { flex: 1; min-width: 0; }
  .df-site-header .mobile-logo-area .container { max-width: none; }
  .df-site-header .mobile-menu-logo.text-center { padding: 18px 8px; text-align: left !important; }
  .df-site-header .mobile-menu-logo img { width: 160px; max-width: 100%; height: auto; }
  .df-site-header .mobile-menu-area { width: 64px; flex: 0 0 64px; background: transparent; }
  .df-site-header .mobile-menu.mean-container { overflow: visible; }
  .df-site-header .mean-container .mean-bar {
    position: static;
    float: none;
    min-height: 0;
    padding: 0;
    background: transparent;
  }
  .df-site-header .mean-container a.meanmenu-reveal {
    position: absolute;
    top: 7px;
    right: 4px !important;
    color: #533eff !important;
  }
  .df-site-header .mean-container a.meanmenu-reveal span { background: #533eff; }
  .df-site-header .mean-container .mean-nav {
    position: absolute;
    top: 100%;
    left: 0;
    float: none;
    width: 100%;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 8px 12px rgba(31,35,41,.08);
  }
  .df-site-header .mean-push { display: none; }
  html { scroll-padding-top: 88px; }
}

/* Product badges next to the DataForge wordmark. */
.hero-title { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.hero-title h1 { margin: 0; }
.df-hero-badges { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.df-hero-badges .badge-ai { position: static; margin: 0; }
.df-registry-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #d5cafa;
  border-radius: 12px;
  background: #eee9ff;
  color: #392265;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}
.df-registry-badge img { display: block; width: 18px; height: 18px; object-fit: contain; }
@media (max-width: 768px) {
  .hero-title { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
  .hero-title h1 { align-self: flex-start; width: auto; text-align: left; }
  .df-hero-badges { align-self: flex-start; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 100%; }
  .df-hero-badges .badge-ai,
  .df-hero-badges .df-registry-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    max-width: none;
    margin: 0;
  }
  .df-hero-badges .df-registry-badge { border-color: #d5cafa; }
  .df-hero-badges .df-registry-badge img { width: 16px; height: 16px; flex-shrink: 0; }
}