/* CERTIFIED DATA ROOM MODAL (Fabio, 11/11): the presentation modal opened by the Data Room button in the home.
   Facts and names from the TrueScreen Bible: Q-DEF-28 (definition), TS-DRM-01/02/03 (trail, roles, use cases), TS-DRM-05 (plan).
   Cleaner version (Fabio, 11/11: "più ordinata e pulita"; restored on 11/11: "torna all'impostazione di prima, con caratteristiche e icone"):
   - one call to action, in the footer; the video plays from its own button (no duplicate buttons in the hero);
   - the close button sits in its own corner, never over the video;
   - section titles as small labels, features as icon and name (details on the website page), use cases as soft chips;
   - on a 1440 x 900 screen everything fits without scrolling.
   Design system: radius 16 dialog and video, 8 buttons and icon tiles, 999 chips; border or shadow, never both;
   motion power3-out, 500 ms in / 350 ms out on hover; respects prefers-reduced-motion. */

.drm[hidden] { display: none; }
.drm { --drm-ease: cubic-bezier(.215, .61, .355, 1); --drm-line: var(--ts-border-default, #e2e8ee);
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 32px;
  background: rgba(8, 17, 34, 0.56); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: drm-fade .3s var(--drm-ease) both; }
.drm.is-closing { animation: drm-fade-out .2s cubic-bezier(.55, .055, .675, .19) both; }
.drm-dialog { position: relative; display: flex; flex-direction: column; width: min(1040px, 100%); max-height: min(880px, calc(100vh - 64px));
  background: var(--ts-surface-raised, #fff); color: var(--ts-text-primary); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(8, 17, 34, 0.28); outline: 0; animation: drm-rise .3s var(--drm-ease) both; }
.drm.is-closing .drm-dialog { animation: drm-sink .2s cubic-bezier(.55, .055, .675, .19) both; }
@keyframes drm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drm-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes drm-rise { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes drm-sink { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }

.drm-close { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ts-text-secondary); cursor: pointer;
  transition: background-color .35s var(--drm-ease), color .35s var(--drm-ease); }
.drm-close:hover { background: #f1f4f8; color: var(--ts-text-primary); transition-duration: .5s; }
.drm-close svg { width: 18px; height: 18px; }
.drm-close:focus-visible, .drm-btn:focus-visible, .drm-play:focus-visible { outline: 2px solid var(--ts-focus-ring, #0068d9); outline-offset: 2px; }

.drm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* hero: text on the left, video on the right */
.drm-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; padding: 48px 48px 40px; }
.drm-eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/16px "DM Sans", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ts-text-link, #0068d9); }
.drm-eyebrow .hv3-ic { width: 16px; height: 16px; color: #007afe; }
.drm-title { margin: 12px 0 0; font: 700 30px/36px Raleway, "DM Sans", sans-serif; letter-spacing: -0.01em; color: var(--ts-text-primary); text-wrap: balance; }
.drm-title em { font-style: normal; color: #007afe; }
.drm-lead { margin: 14px 0 0; font: 400 15px/23px "DM Sans", sans-serif; color: var(--ts-text-secondary); max-width: 44ch; }

/* video */
.drm-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #081122; }
.drm-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.drm-play { position: absolute; inset: 0; display: grid; place-items: end start; padding: 14px; border: 0; cursor: pointer;
  background: linear-gradient(0deg, rgba(8, 17, 34, 0.32) 0%, rgba(8, 17, 34, 0) 45%); transition: background-color .35s var(--drm-ease); }
.drm-play-btn { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.96);
  color: var(--ts-text-primary); font: 600 14px/20px "DM Sans", sans-serif; transition: transform .35s var(--drm-ease); }
.drm-play:hover .drm-play-btn { transform: scale(1.03); transition-duration: .5s; }
.drm-play-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #007afe; color: #fff; }
.drm-play-ic svg { width: 13px; height: 13px; margin-left: 2px; }
.drm-dur { font: 500 12px/16px "JetBrains Mono", monospace; color: var(--ts-text-muted, #6b7280); }
.drm-video.is-playing .drm-play { opacity: 0; pointer-events: none; transition: opacity .3s var(--drm-ease); }

/* sections */
.drm-sec { margin: 0 48px; padding: 28px 0; border-top: 1px solid var(--drm-line); }
.drm-k { margin: 0 0 20px; font: 600 12px/16px "DM Sans", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ts-text-muted, #6b7280); }

/* features: icon and name only (Fabio, 11/11: "riduci le informazioni"), the details live on the website page */
.drm-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
.drm-feats li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.drm-fic { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; background: #eef5ff; }
.drm-fic .hv3-ic { width: 18px; height: 18px; color: #007afe; }
.drm-fname { font: 600 15px/22px "DM Sans", sans-serif; color: var(--ts-text-primary); }
.drm-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font: 600 14px/20px "DM Sans", sans-serif; color: var(--ts-text-link, #0068d9); text-decoration: none; }
.drm-more:hover { text-decoration: underline; }
.drm-more .hv3-ic { width: 16px; height: 16px; color: currentColor; transition: transform .35s var(--drm-ease); }
.drm-more:hover .hv3-ic { transform: translateX(3px); transition-duration: .5s; }
.drm-more:focus-visible { outline: 2px solid var(--ts-focus-ring, #0068d9); outline-offset: 2px; border-radius: 4px; }

/* use cases: soft chips */
.drm-cases { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.drm-cases li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; border-radius: 999px;
  background: #f4f7fb; font: 500 14px/20px "DM Sans", sans-serif; color: var(--ts-text-primary); }
.drm-cases li .hv3-ic { width: 16px; height: 16px; color: #007afe; }

/* footer with the only call to action, always visible */
.drm-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 48px;
  border-top: 1px solid var(--drm-line); background: #f8fafc; }
.drm-foot p { margin: 0; font: 600 15px/22px "DM Sans", sans-serif; color: var(--ts-text-primary); }
.drm-foot p span { display: block; font: 400 13px/18px "DM Sans", sans-serif; color: var(--ts-text-muted, #6b7280); }
.drm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 8px; border: 0;
  font: 600 15px/20px "DM Sans", sans-serif; text-decoration: none; cursor: pointer; transition: background-color .35s var(--drm-ease); }
.drm-btn.is-primary { background: var(--ts-interactive-primary, #007afe); color: #fff; }
.drm-btn.is-primary:hover { background: var(--ts-interactive-primary-hover, #0068d9); color: #fff; text-decoration: none; transition-duration: .5s; }
.drm-btn .hv3-ic { width: 16px; height: 16px; color: currentColor; }

/* entrance of the content, after the dialog */
.drm-in { animation: drm-up .5s var(--drm-ease) both; animation-delay: calc(var(--d, 0) * 60ms + 120ms); }
@keyframes drm-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.drm-ic-docs { --m: url(assets/icons/nero-file.svg); }
.drm-ic-users { --m: url(assets/icons/profile-outlined.svg); }
.drm-ic-ai { --m: url(assets/icons/whats-new.svg); }
.drm-ic-escrow { --m: url(assets/icons/shield-outlined.svg); }
.drm-ic-list { --m: url(assets/icons/check.svg); }
.drm-ic-cert { --m: url(assets/icons/notarize.svg); }
.drm-ic-deal { --m: url(assets/icons/transfer.svg); }
.drm-ic-legal2 { --m: url(assets/icons/forensic-document.svg); }
.drm-ic-sign { --m: url(assets/icons/signature.svg); }
.drm-ic-tender { --m: url(assets/icons/document.svg); }
.drm-ic-ip2 { --m: url(assets/icons/fingerprint.svg); }

@media (max-width: 1023px) {
  .drm-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 56px 32px 32px; }
  .drm-sec { margin: 0 32px; }
  .drm-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drm-foot { padding: 16px 32px; }
}
@media (max-width: 599px) {
  .drm { padding: 0; place-items: stretch; }
  .drm-dialog { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .drm-close { top: 8px; right: 8px; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.94); }
  .drm-hero { padding: 52px 16px 24px; gap: 20px; }
  .drm-title { font-size: 24px; line-height: 30px; }
  .drm-lead { font-size: 15px; line-height: 22px; }
  .drm-video { border-radius: 8px; }
  .drm-play { padding: 10px; }
  .drm-play-btn { padding: 6px 12px 6px 6px; font-size: 13px; }
  .drm-play-ic { width: 26px; height: 26px; }
  .drm-sec { margin: 0 16px; padding: 24px 0; }
  .drm-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .drm-fname { font-size: 14px; line-height: 19px; }
  .drm-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .drm-foot p { display: none; }
  .drm-foot .drm-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .drm, .drm-dialog, .drm-in, .drm.is-closing, .drm.is-closing .drm-dialog { animation: none; }
  .drm-close, .drm-play-btn, .drm-btn { transition: none; }
}
body.drm-open { overflow: hidden; }