trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/*
 * DIJASOFT Welcome/Landing Page Styles
 * Extracted from app/views/public/welcome.html.erb for maintainability
 *
 * =============================================================
 * TABLE OF CONTENTS
 * =============================================================
 * 1. CSS Custom Properties (Theming)
 * 2. Global & Scrollbar
 * 3. Typography System
 * 4. Blinking LED Lights (Logo Server Rack)
 * 5. Brand Wordmark
 * 6. Card Styles (Glassmorphism, 3D, Gradient Borders)
 * 7. Scroll Reveal Animations
 * 8. Micro-Animations (Float, Pulse, Breathe, Shimmer)
 * 9. Section Gradient Bridges
 * 10. Card 3D Perspective
 * 11. Navbar
 * 12. Hero Section
 * 13. Button Enhancements
 * 14. Daisy UI Reset
 * 15. Video Player Slides
 * 16. Slide-Specific Animations (Sparkles, Icons, Orbits, etc.)
 * =============================================================
 */

/* ============================================================ */
/* 1. CSS CUSTOM PROPERTIES — PREMIUM THEMING SYSTEM           */
/* ============================================================ */
:root {
  /* Color Palette */
  --bg-primary: #0B0D1A;
  --bg-secondary: #0f1123;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(139, 92, 246, 0.25);
  --accent-violet: #8B5CF6;
  --accent-purple: #A78BFA;
  --accent-cyan: #22D3EE;
  --accent-emerald: #10B981;
  --accent-amber: #F59E0B;
  --accent-blue: #3B82F6;
  --text-primary: #FFFFFF;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;

  /* Typography Scale */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-wordmark: 'Fredoka', sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.4);
  --shadow-xl: 0 20px 50px rgba(0,0,0,0.5);
  --shadow-glow-violet: 0 0 20px rgba(139, 92, 246, 0.15);
  --shadow-glow-cyan: 0 0 20px rgba(34, 211, 238, 0.1);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-base: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal: 0.9s cubic-bezier(0.16, 1, 0.3, 1);

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Scroll snap ease */
  --snap-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================ */
/* SCROLL SNAP CONTAINER — hashgraphvc.com-style seamless scroll */
/* ============================================================ */
.scroll-container {
  position: fixed;
  inset: 0;
  overflow-y: scroll;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar { display: none; }

.snap-section {
  scroll-snap-align: start;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Section content reveal animations */
.snap-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s var(--snap-ease), transform 0.35s var(--snap-ease);
  will-change: opacity, transform;
}

.snap-section.snap-active .snap-content {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for child elements */
.snap-content.delay-1 { transition-delay: 0.02s; }
.snap-content.delay-2 { transition-delay: 0.05s; }
.snap-content.delay-3 { transition-delay: 0.08s; }
.snap-content.delay-4 { transition-delay: 0.12s; }
.snap-content.delay-5 { transition-delay: 0.16s; }
.snap-content.delay-6 { transition-delay: 0.2s; }

/* Scale-in variant for cards */
.snap-content.scale-in {
  opacity: 0;
  transform: scale(0.95) translateY(15px);
  transition: opacity 0.3s var(--snap-ease), transform 0.35s var(--snap-ease);
}
.snap-section.snap-active .snap-content.scale-in {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ============================================================ */
/* SECTION NAVIGATION DOTS — Fixed right side                  */
/* ============================================================ */
.section-dots {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.section-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.25);
  border: 1.5px solid rgba(167, 139, 250, 0.35);
  cursor: pointer;
  transition: all 0.5s var(--snap-ease);
  pointer-events: auto;
  position: relative;
}

.section-dot:hover {
  background: rgba(167, 139, 250, 0.6);
  border-color: rgba(167, 139, 250, 0.8);
  transform: scale(1.4);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
}

.section-dot.active {
  background: #8B5CF6;
  border-color: #A78BFA;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.5), 0 0 24px rgba(139, 92, 246, 0.2);
  transform: scale(1.15);
}

.section-dot.active:hover {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.7), 0 0 40px rgba(139, 92, 246, 0.3);
}

.section-dot .dot-tooltip {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(15, 17, 35, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 5px 14px;
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 8px rgba(139, 92, 246, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.section-dot:hover .dot-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Active section dot shows an extra glow pulse */
.section-dot.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.2);
  animation: dot-ring-pulse 2s ease-out infinite;
}

@keyframes dot-ring-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ============================================================ */
/* HIDE SCROLLBAR for clean aesthetic (keep functionality)      */
/* ============================================================ */
.scroll-container::-webkit-scrollbar { display: none; }

/* ============================================================ */
/* 2. GLOBAL STYLES & SCROLLBAR                                 */
/* ============================================================ */
html {
  scroll-behavior: smooth;
  overflow: hidden;
  height: 100%;
}

body {
  height: 100%;
}

/* Also ensure body doesn't scroll — scroll-container handles it */
body.overflow-y-auto { overflow-y: hidden !important; }

/* Nav must also have position: relative for section gradient bridges */
section[id] {
  position: relative;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.4); }

/* ============================================================ */
/* 3. PREMIUM TYPOGRAPHY SYSTEM                                 */
/* ============================================================ */
h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--font-display);
}

body, .font-body, p, li, span, a, input, textarea, button, label {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--font-body);
}

.font-heading.font-bold { font-weight: 700; }
.font-heading.font-semibold { font-weight: 600; }

h1 { letter-spacing: -0.03em; line-height: var(--leading-tight, 1.1); }
h2 { letter-spacing: -0.02em; line-height: var(--leading-tight, 1.1); }
h3 { letter-spacing: -0.01em; }

.bg-clip-text.text-transparent {
  -webkit-font-smoothing: antialiased;
  background-size: 200% auto;
  animation: shimmerGradient 4s ease-in-out infinite;
}

@keyframes shimmerGradient {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: var(--text-lg, 1.125rem);
}

.meta-label {
  letter-spacing: 0.18em;
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--text-xs, 0.75rem);
  color: var(--accent-violet);
}

/* ============================================================ */
/* 4. BLINKING LED LIGHTS (Logo Server Rack)                   */
/* ============================================================ */
@keyframes led-blink {
  0%, 100% { opacity: 1; fill: #22D3EE; filter: drop-shadow(0 0 2px rgba(34, 211, 238, 0.8)); }
  50% { opacity: 0.3; fill: #22D3EE; filter: none; }
}
@keyframes led-blink-fast {
  0%, 100% { opacity: 1; fill: #22D3EE; filter: drop-shadow(0 0 3px rgba(34, 211, 238, 1)); }
  50% { opacity: 0.4; fill: #22D3EE; filter: none; }
}
@keyframes led-pulse {
  0%, 100% { opacity: 1; fill: #22D3EE; filter: drop-shadow(0 0 4px rgba(34, 211, 238, 1)) drop-shadow(0 0 8px rgba(34, 211, 238, 0.5)); }
  50% { opacity: 0.5; fill: #67E8F9; filter: drop-shadow(0 0 1px rgba(34, 211, 238, 0.2)); }
}
.led { transform-origin: center; }
.led-1 { animation: led-blink 1.4s ease-in-out infinite; }
.led-2 { animation: led-blink-fast 1.0s ease-in-out infinite 0.3s; }
.led-3 { animation: led-pulse 1.8s ease-in-out infinite 0.6s; }

/* ============================================================ */
/* 5. DIJASOFT WORDMARK                                         */
/* ============================================================ */
.dijasoft-wordmark {
  position: relative;
  display: inline-block;
  font-family: var(--font-wordmark) !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  transition: color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.dijasoft-wordmark::after {
  display: none;
}

/* ============================================================ */
/* 6. PREMIUM CARD STYLING — Glassmorphism + Gradient Borders    */
/* ============================================================ */
.card-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
}
.card-glass:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-glow-violet);
  transform: translateY(-2px);
}

/* Gradient border card */
.card-gradient-border {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-xl);
}
.card-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(167, 139, 250, 0.1), rgba(139, 92, 246, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity var(--transition-base);
}
.card-gradient-border:hover::before {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.5), rgba(167, 139, 250, 0.2), rgba(139, 92, 246, 0.5));
}

.card-purple-glow {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.08));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
}
.card-purple-glow:hover {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.15), 0 0 60px rgba(139, 92, 246, 0.05);
  border-color: rgba(139, 92, 246, 0.35);
  transform: translateY(-3px);
}

/* ============================================================ */
/* 7. SCROLL REVEAL ANIMATIONS                                  */
/* ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
  will-change: opacity, transform;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================ */
/* 8. MICRO-ANIMATIONS                                          */
/* ============================================================ */
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.animate-shimmer {
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

/* ============================================================ */
/* 9. SECTION GRADIENT BRIDGES                                  */
/* ============================================================ */
section[id]::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 1;
  top: 0;
  background: linear-gradient(to bottom, #0B0D1A 0%, #0B0D1A 60%, transparent 100%);
}
section[id]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 0;
  bottom: 0;
  background: linear-gradient(to top, #0B0D1A 0%, #0B0D1A 60%, transparent 100%);
}
section[id]:first-of-type::before,
section[id]:first-of-type::after { display: none; }
section[id]:last-of-type::after { display: none; }

/* ============================================================ */
/* 10. CARD 3D PERSPECTIVE                                      */
/* ============================================================ */
.card-3d {
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ============================================================ */
/* 11. PREMIUM NAVBAR — Floating glass effect                  */
/* ============================================================ */
nav {
  backdrop-filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  background: transparent !important;
  border-bottom: none !important;
}

/* Floating effect for nav items */
nav a, nav button {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

nav a:hover {
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.4), 0 0 40px rgba(139, 92, 246, 0.2);
  transform: translateY(-1px);
}

/* Logo floating glow */
.logo-3d:hover .logo-icon {
  box-shadow: 0 0 25px rgba(139, 92, 246, 0.4), 0 0 50px rgba(139, 92, 246, 0.15);
  transform: translateY(-1px);
}

/* ============================================================ */
/* 12. HERO SECTION ENHANCEMENTS                                */
/* ============================================================ */
.hero-headline {
  perspective: 1200px;
}
.hero-headline > span {
  display: block;
  animation: heroReveal 1s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.hero-headline > span:nth-child(1) { animation-delay: 0.2s; }
.hero-headline > span:nth-child(2) { animation-delay: 0.4s; }
.hero-headline > span:nth-child(3) { animation-delay: 0.6s; }

@keyframes heroReveal {
  0%   { opacity: 0; transform: translateY(20px) scale(0.97); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ============================================================ */
/* 13. BUTTON ENHANCEMENTS                                      */
/* ============================================================ */
.btn-premium {
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
}
.btn-premium::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.6s ease;
}
.btn-premium:hover::before { left: 100%; }

/* ============================================================ */
/* 14. DAISY UI RESET FOR FORMS                                 */
/* ============================================================ */
input, textarea, select {
  background-color: transparent !important;
}

/* ============================================================ */
/* 15. VIDEO PLAYER SLIDES                                      */
/* ============================================================ */
.video-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.video-player-wrapper:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.08);
}

.slide-1 { animation: showSlide1 45s linear infinite; }
@keyframes showSlide1 { 0%, 9% { opacity: 1; } 11%, 100% { opacity: 0; } }
.slide-2 { animation: showSlide2 45s linear infinite; }
@keyframes showSlide2 { 0%, 9% { opacity: 0; } 11%, 20% { opacity: 1; } 22%, 100% { opacity: 0; } }
.slide-3 { animation: showSlide3 45s linear infinite; }
@keyframes showSlide3 { 0%, 20% { opacity: 0; } 22%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
.slide-4 { animation: showSlide4 45s linear infinite; }
@keyframes showSlide4 { 0%, 31% { opacity: 0; } 33%, 42% { opacity: 1; } 44%, 100% { opacity: 0; } }
.slide-5 { animation: showSlide5 45s linear infinite; }
@keyframes showSlide5 { 0%, 42% { opacity: 0; } 44%, 53% { opacity: 1; } 55%, 100% { opacity: 0; } }
.slide-6 { animation: showSlide6 45s linear infinite; }
@keyframes showSlide6 { 0%, 53% { opacity: 0; } 55%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } }
.slide-7 { animation: showSlide7 45s linear infinite; }
@keyframes showSlide7 { 0%, 64% { opacity: 0; } 66%, 75% { opacity: 1; } 77%, 100% { opacity: 0; } }
.slide-8 { animation: showSlide8 45s linear infinite; }
@keyframes showSlide8 { 0%, 75% { opacity: 0; } 77%, 84% { opacity: 1; } 86%, 100% { opacity: 0; } }
.slide-9 { animation: showSlide9 45s linear infinite; }
@keyframes showSlide9 { 0%, 84% { opacity: 0; } 86%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }

.video-fade-out {
  position: absolute; inset: 0; background: #0B0D1A; z-index: 25; pointer-events: none;
  animation: fadeToBlack 45s linear infinite;
}
@keyframes fadeToBlack { 0%, 3% { opacity: 1; } 6%, 93% { opacity: 0; } 98%, 100% { opacity: 1; } }

@keyframes progressFill { 0% { width: 0%; } 100% { width: 100%; } }
.video-progress-bar { animation: progressFill 45s linear infinite; position: relative; }
.video-progress-track { cursor: pointer; transition: height 0.15s ease; }
.video-progress-track:hover { height: 6px; }
.video-progress-track .video-progress-bar::after {
  content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: #8B5CF6;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.6); opacity: 0; transition: opacity 0.2s ease;
}
.video-progress-track:hover .video-progress-bar::after { opacity: 1; }

.logo-intro { animation: logoPulse 2s ease-in-out infinite; }
@keyframes logoPulse { 0%, 100% { box-shadow: 0 0 20px rgba(139,92,246,0.3); } 50% { box-shadow: 0 0 40px rgba(139,92,246,0.5); } }
.dijasoft-intro-text { background-size: 200% auto; animation: shimmer 3s linear infinite; }

.logo-final-icon { animation: logoScaleIn 45s linear infinite; }
@keyframes logoScaleIn {
  0%, 83.5% { transform: scale(0.3); opacity: 0; }
  85% { transform: scale(1.2); opacity: 1; }
  86.5% { transform: scale(0.92); opacity: 1; }
  88% { transform: scale(1.06); opacity: 1; }
  89.5%, 100% { transform: scale(1); opacity: 1; }
}
.dijasoft-final-text {
  font-family: var(--font-wordmark) !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  animation: textRevealFinal 45s linear infinite;
}
@keyframes textRevealFinal {
  0%, 84% { opacity: 0; transform: translateY(12px); letter-spacing: 0.3em; filter: blur(3px); }
  85.5% { opacity: 1; transform: translateY(0); letter-spacing: 0.12em; filter: blur(0); }
  87.5%, 100% { opacity: 1; transform: translateY(0); letter-spacing: 0.12em; filter: blur(0); }
}
.logo-tagline { animation: taglineReveal 45s linear infinite; }
@keyframes taglineReveal {
  0%, 85.5% { opacity: 0; transform: translateY(8px); }
  87% { opacity: 1; transform: translateY(0); }
  89%, 100% { opacity: 1; transform: translateY(0); }
}

.sparkle {
  position: absolute;
  font-size: 10px;
  color: rgba(139,92,246,0.5);
  animation: sparkleFloat linear infinite;
}
.s1 { top: 10%; left: 15%; animation-duration: 2.5s; }
.s2 { top: 20%; right: 20%; animation-duration: 3s; animation-delay: 0.3s; font-size: 8px; }
.s3 { top: 70%; left: 10%; animation-duration: 2.8s; animation-delay: 0.7s; }
.s4 { top: 80%; right: 15%; animation-duration: 3.2s; animation-delay: 1s; }
.s5 { top: 30%; left: 5%; animation-duration: 2.2s; animation-delay: 0.5s; font-size: 8px; }
.s6 { top: 15%; left: 60%; animation-duration: 2.7s; animation-delay: 1.2s; }
@keyframes sparkleFloat {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  25% { opacity: 0.8; transform: scale(1.2) rotate(90deg); }
  50% { opacity: 0.3; transform: scale(0.8) rotate(180deg); }
  100% { opacity: 0; transform: scale(0.3) rotate(360deg); }
}

/* ============================================================ */
/* 16. SLIDE-SPECIFIC ANIMATIONS                                */
/* ============================================================ */

.slide-icon { animation: slideIconFloat 3s ease-in-out infinite; }
@keyframes slideIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
  50% { transform: translateY(-12px) rotate(5deg); opacity: 0.4; }
}

@keyframes floatError {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-10px) rotate(10deg); opacity: 0.5; }
}
.disconnected-dot { animation: dotPulse 1.5s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.5); }
}
.warning-ring {
  position: absolute; width: 100px; height: 100px;
  border: 1px solid rgba(239,68,68,0.2); border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  animation: ringExpand 2.5s ease-out infinite;
}
@keyframes ringExpand {
  0% { width: 60px; height: 60px; opacity: 0.6; }
  100% { width: 200px; height: 200px; opacity: 0; }
}
.scanning-line { animation: scanLine 3s ease-in-out infinite; }
@keyframes scanLine {
  0% { top: 10%; opacity: 0; }
  10% { opacity: 0.5; }
  50% { opacity: 0.8; }
  90% { opacity: 0.5; }
  100% { top: 90%; opacity: 0; }
}
.floating-icon { animation: floatIcon 3s ease-in-out infinite; }
@keyframes floatIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.frag { animation: fragFloat 4s ease-in-out infinite; }
.frag-1 { top: 12%; left: 5%; animation-delay: 0s; }
.frag-2 { bottom: 15%; right: 8%; animation-delay: 0.8s; }
.frag-3 { top: 35%; right: 20%; animation-delay: 1.6s; }
@keyframes fragFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
  50% { transform: translateY(-20px) rotate(8deg); opacity: 0.5; }
}

.light-ray {
  position: absolute; width: 3px; height: 80px;
  background: linear-gradient(to top, rgba(59,130,246,0.3), transparent);
  left: 50%; top: 50%; transform-origin: bottom center;
  margin-left: -1.5px; animation: rayPulse 2s ease-in-out infinite;
}
@keyframes rayPulse { 0%, 100% { opacity: 0.2; height: 60px; } 50% { opacity: 0.6; height: 100px; } }
.insight-ring {
  position: absolute; width: 40px; height: 40px;
  border: 1px solid rgba(59,130,246,0.15); border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  animation: insightRing 3s ease-out infinite;
}
@keyframes insightRing { 0% { width: 20px; height: 20px; opacity: 0.8; } 100% { width: 180px; height: 180px; opacity: 0; } }
.insight-icon { animation: insightPulse 2s ease-in-out infinite; }
@keyframes insightPulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.15); opacity: 0.6; } }
@keyframes floatParticle { 0%, 100% { transform: translateY(0); opacity: 0.3; } 50% { transform: translateY(-18px); opacity: 0.6; } }

.orbit-ring {
  position: absolute;
  border: 1px solid rgba(139,92,246,0.12); border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
}
.orbit-ring-1 { width: 160px; height: 160px; animation: orbitSpin 6s linear infinite; }
.orbit-ring-2 { width: 220px; height: 220px; animation: orbitSpin 10s linear infinite reverse; }
@keyframes orbitSpin { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } }
.orbit-dot {
  position: absolute; left: 50%; top: 50%;
  animation: orbitDotRotate 6s linear infinite;
}
@keyframes orbitDotRotate {
  0% { transform: translate(-50%,-50%) rotate(var(--angle)) translateX(var(--size)); }
  100% { transform: translate(-50%,-50%) rotate(calc(var(--angle) + 360deg)) translateX(var(--size)); }
}

.pipeline-flow { animation: pipelineScan 2s ease-in-out infinite; top: 45%; }
@keyframes pipelineScan {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 0.8; }
  100% { transform: translateX(100%); opacity: 0; }
}
.pipeline-dot { animation: dotPulse 1.8s ease-in-out infinite; }
.pipeline-fill { animation: pipelineFill 3s ease-in-out infinite; width: 0%; }
@keyframes pipelineFill { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; } }
.floating-coin { animation: coinFloat 3s ease-in-out infinite; display: inline-block; }
@keyframes coinFloat {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  50% { transform: translateY(-10px) rotateY(180deg); }
}

.chart-bar {
  animation: barRise 1.5s ease-out forwards;
  transform-origin: bottom;
}
@keyframes barRise {
  0% { height: 0; opacity: 0; }
  100% { height: var(--bar-height); opacity: 1; }
}
.line-chart-path { animation: drawLine 2s ease-out forwards; }
@keyframes drawLine { 0% { stroke-dashoffset: 200; } 100% { stroke-dashoffset: 0; } }

.stack-bar {
  animation: stackRise 1.5s ease-out forwards;
}
@keyframes stackRise {
  0% { height: 0; opacity: 0; }
  100% { height: var(--stack-height); opacity: 1; }
}

.value-orbit {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  animation: valueOrbitRotate 8s linear infinite;
}
@keyframes valueOrbitRotate {
  0% { transform: translate(-50%,-50%) rotate(var(--v-angle)) translateX(80px); }
  100% { transform: translate(-50%,-50%) rotate(calc(var(--v-angle) + 360deg)) translateX(80px); }
}
.connect-line {
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: drawLine 2s ease-out forwards;
}
.connect-svg { animation: svgFade 3s ease-in-out infinite; }
@keyframes svgFade { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.hover-glow {
  transition: color 0.3s ease;
}
.hover-glow:hover {
  color: #c4b5fd !important;
}

/* ============================================================ */
/* LIVE DATA TICKER                                             */
/* ============================================================ */
.data-ticker {
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}
.ticker-track {
  display: inline-flex;
  animation: tickerScroll 60s linear infinite;
  will-change: transform;
}
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ============================================================ */
/* REAL-TIME DATA PULSE                                         */
/* ============================================================ */
.live-price {
  transition: color 0.5s ease;
}
.live-price.flash-up {
  color: #34d399 !important;
  transition: color 0s;
}
.live-price.flash-down {
  color: #f59e0b !important;
  transition: color 0s;
}

/* ============================================================ */
/* COUNTER UP ANIMATION                                         */
/* ============================================================ */
.counter-value {
  font-variant-numeric: tabular-nums;
}

/* ============================================================ */
/* MODULE CARD ANIMATIONS                                       */
/* ============================================================ */

@keyframes pipeline-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.animate-pipeline-sweep {
  animation: pipeline-sweep 2s ease-in-out infinite;
}

@keyframes pipeline-dot {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}
.animate-pipeline-dot {
  animation: pipeline-dot 1.6s ease-in-out infinite;
}

@keyframes bar-grow {
  0% { height: 0 !important; opacity: 0; }
  50% { opacity: 1; }
  100% { height: var(--bar-h); opacity: 1; }
}
.animate-bar-grow {
  animation: bar-grow 2s ease-out forwards;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes node-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.animate-node-pulse {
  animation: node-pulse 2s ease-in-out infinite;
}

@keyframes connect-line-draw {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.animate-connect-line {
  animation: connect-line-draw 1.5s ease-out forwards;
}

@keyframes chart-line-draw {
  0% { stroke-dashoffset: 400; }
  100% { stroke-dashoffset: 0; }
}
.animate-chart-line {
  animation: chart-line-draw 3s ease-out forwards;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

@keyframes chart-fill-fade {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.2; }
}
.animate-chart-fill {
  animation: chart-fill-fade 3s ease-in-out infinite;
}

@keyframes dot-fade {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.animate-dot-fade {
  animation: dot-fade 2s ease-in-out infinite;
}

@keyframes document-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 3deg)); }
  50% { transform: translateY(-4px) rotate(var(--rot, 3deg)); }
}
.animate-document-float {
  animation: document-float 3s ease-in-out infinite;
}

@keyframes scan-doc {
  0% { top: 5%; opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { top: 85%; opacity: 0; }
}
.animate-scan-doc {
  animation: scan-doc 2.5s ease-in-out infinite;
}

/* ============================================================ */
/* FIBER OPTIC NETWORK ANIMATIONS                              */
/* ============================================================ */

@keyframes fiber-pulse {
  0% { stroke-dashoffset: 600; opacity: 0; }
  5% { opacity: 1; }
  45% { opacity: 1; }
  55% { opacity: 0; }
  100% { stroke-dashoffset: -200; opacity: 0; }
}
.animate-fiber-pulse {
  animation: fiber-pulse 4s ease-in-out infinite;
}

@keyframes node-glow {
  0%, 100% { opacity: 0.4; r: 2; }
  50% { opacity: 1; r: 3.5; }
}
.animate-node-glow {
  animation: node-glow 3s ease-in-out infinite;
}

@keyframes node-pulse-white {
  0%, 100% { opacity: 0.3; r: 1.5; }
  50% { opacity: 0.8; r: 2.5; }
}
.animate-node-pulse-white {
  animation: node-pulse-white 2.5s ease-in-out infinite;
}

/* ============================================================ */
/* DATA CENTER CITY BUILDING GLOW                              */
/* ============================================================ */
@keyframes building-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.animate-building-glow {
  animation: building-glow 4s ease-in-out infinite;
}

/* ============================================================ */
/* CTA SECTION — SERVER RACK MONITOR ANIMATIONS               */
/* ============================================================ */

@keyframes cta-led {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
.animate-cta-led {
  animation: cta-led 1.5s ease-in-out infinite;
}

@keyframes cta-activity {
  0%, 100% { width: 20px; opacity: 0.15; }
  50% { width: 35px; opacity: 0.35; }
}
.animate-cta-activity {
  animation: cta-activity 2s ease-in-out infinite;
}

@keyframes cta-text {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.animate-cta-text {
  animation: cta-text 2s ease-in-out infinite;
}

@keyframes cta-scan {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(80px); opacity: 0; }
}
.animate-cta-scan {
  animation: cta-scan 3s ease-in-out infinite;
}

/* ============================================================ */
/* GPU CHIP ANIMATIONS                                          */
/* ============================================================ */

@keyframes chip-trace {
  0% { stroke-dashoffset: 300; opacity: 0; }
  10% { opacity: 1; }
  40% { opacity: 1; }
  50% { opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
.animate-chip-trace {
  animation: chip-trace 3s ease-in-out infinite;
}

@keyframes chip-pin {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.4; }
}
.animate-chip-pin {
  animation: chip-pin 2s ease-in-out infinite;
}

/* ============================================================ */
/* 17. 3D PLATFORM SECTION — ASSET MANAGEMENT UNIVERSE          */
/* ============================================================ */

.scene-3d-container {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: hidden;
}

/* ============================================================ */
/* DEEP SPACE PARTICLE FIELD                                   */
/* ============================================================ */
.particle-field {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
}

.p1  { top: 10%; left: 5%;  background: rgba(139,92,246,0.6); animation: particle-drift 8s ease-in-out infinite; animation-delay: 0s;   width: 2px; height: 2px; }
.p2  { top: 20%; left: 12%; background: rgba(255,255,255,0.4); animation: particle-drift 7s ease-in-out infinite; animation-delay: 0.4s; width: 1px; height: 1px; }
.p3  { top: 35%; left: 8%;  background: rgba(167,139,250,0.5); animation: particle-drift 9s ease-in-out infinite; animation-delay: 0.8s; width: 3px; height: 3px; }
.p4  { top: 50%; left: 3%;  background: rgba(139,92,246,0.4); animation: particle-drift 6s ease-in-out infinite; animation-delay: 1.2s; width: 2px; height: 2px; }
.p5  { top: 65%; left: 10%; background: rgba(255,255,255,0.3); animation: particle-drift 8.5s ease-in-out infinite; animation-delay: 1.6s; width: 1px; height: 1px; }
.p6  { top: 80%; left: 7%;  background: rgba(167,139,250,0.4); animation: particle-drift 7.5s ease-in-out infinite; animation-delay: 2s;   width: 2px; height: 2px; }
.p7  { top: 15%; left: 92%; background: rgba(139,92,246,0.5); animation: particle-drift 8s ease-in-out infinite; animation-delay: 0.2s; width: 2px; height: 2px; }
.p8  { top: 28%; left: 88%; background: rgba(255,255,255,0.3); animation: particle-drift 7s ease-in-out infinite; animation-delay: 0.6s; width: 1px; height: 1px; }
.p9  { top: 42%; left: 95%; background: rgba(167,139,250,0.4); animation: particle-drift 9s ease-in-out infinite; animation-delay: 1s;   width: 3px; height: 3px; }
.p10 { top: 58%; left: 90%; background: rgba(139,92,246,0.5); animation: particle-drift 6.5s ease-in-out infinite; animation-delay: 1.4s; width: 2px; height: 2px; }
.p11 { top: 72%; left: 93%; background: rgba(255,255,255,0.4); animation: particle-drift 8s ease-in-out infinite; animation-delay: 1.8s; width: 1px; height: 1px; }
.p12 { top: 88%; left: 96%; background: rgba(167,139,250,0.3); animation: particle-drift 7s ease-in-out infinite; animation-delay: 2.2s; width: 2px; height: 2px; }
.p13 { top: 5%;  left: 48%; background: rgba(139,92,246,0.4); animation: particle-drift 10s ease-in-out infinite; animation-delay: 0.3s; width: 2px; height: 2px; }
.p14 { top: 30%; left: 50%; background: rgba(255,255,255,0.3); animation: particle-drift 9s ease-in-out infinite; animation-delay: 0.7s; width: 1px; height: 1px; }
.p15 { top: 55%; left: 52%; background: rgba(167,139,250,0.4); animation: particle-drift 8s ease-in-out infinite; animation-delay: 1.1s; width: 2px; height: 2px; }
.p16 { top: 75%; left: 48%; background: rgba(139,92,246,0.3); animation: particle-drift 7s ease-in-out infinite; animation-delay: 1.5s; width: 1px; height: 1px; }
.p17 { top: 90%; left: 50%; background: rgba(255,255,255,0.2); animation: particle-drift 9.5s ease-in-out infinite; animation-delay: 1.9s; width: 1px; height: 1px; }
.p18 { top: 45%; left: 40%; background: rgba(167,139,250,0.3); animation: particle-drift 6s ease-in-out infinite; animation-delay: 2.3s; width: 2px; height: 2px; }
.p19 { top: 60%; left: 60%; background: rgba(139,92,246,0.4); animation: particle-drift 8.5s ease-in-out infinite; animation-delay: 2.6s; width: 2px; height: 2px; }
.p20 { top: 22%; left: 75%; background: rgba(255,255,255,0.3); animation: particle-drift 7.5s ease-in-out infinite; animation-delay: 2.9s; width: 1px; height: 1px; }

@keyframes particle-drift {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.5);
  }
  25% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.3;
    transform: translateY(-30px) translateX(15px) scale(1.2);
  }
  75% {
    opacity: 0.6;
    transform: translateY(10px) translateX(-10px) scale(0.8);
  }
}

/* ============================================================ */
/* CENTRAL 3D CUBE — ISOMETRIC ROTATING CORE                   */
/* ============================================================ */
.cube-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin-left: -60px;
  margin-top: -60px;
  transform-style: preserve-3d;
  animation: cube-rotate 20s linear infinite;
  z-index: 2;
}

.cube-3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.cube-face {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1.5px solid rgba(139, 92, 246, 0.25);
  background: rgba(139, 92, 246, 0.03);
  box-shadow: inset 0 0 30px rgba(139, 92, 246, 0.05);
}

.cube-face.front  { transform: translateZ(60px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(60px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(60px); }
.cube-face.right  { transform: rotateY(90deg) translateZ(60px); }
.cube-face.top    { transform: rotateX(90deg) translateZ(60px); border-color: rgba(167, 139, 250, 0.3); background: rgba(167, 139, 250, 0.05); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(60px); }

.cube-core-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.3), transparent);
  transform: translateZ(0);
  animation: core-pulse 3s ease-in-out infinite;
}

@keyframes cube-rotate {
  0%   { transform: rotateX(-20deg) rotateY(0deg); }
  25%  { transform: rotateX(-25deg) rotateY(90deg); }
  50%  { transform: rotateX(-20deg) rotateY(180deg); }
  75%  { transform: rotateX(-25deg) rotateY(270deg); }
  100% { transform: rotateX(-20deg) rotateY(360deg); }
}

@keyframes core-pulse {
  0%, 100% { opacity: 0.4; transform: translateZ(0) scale(1); }
  50%      { opacity: 0.8; transform: translateZ(0) scale(1.3); }
}

/* ============================================================ */
/* ORBITAL RINGS — 3D ROTATING ASSET ORBITS                   */
/* ============================================================ */
.orbit-ring-3d {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.08);
  transform-style: preserve-3d;
  z-index: 1;
}

.orbit-1 {
  width: 400px;
  height: 400px;
  margin-left: -200px;
  margin-top: -200px;
  border-color: rgba(139, 92, 246, 0.1);
  animation: orbit-spin-1 30s linear infinite;
}

.orbit-2 {
  width: 280px;
  height: 280px;
  margin-left: -140px;
  margin-top: -140px;
  border-color: rgba(167, 139, 250, 0.08);
  animation: orbit-spin-2 22s linear infinite;
  border-style: dashed;
}

.orbit-3 {
  width: 350px;
  height: 350px;
  margin-left: -175px;
  margin-top: -175px;
  border-color: rgba(255, 255, 255, 0.05);
  animation: orbit-spin-3 26s linear infinite;
  border-width: 0.5px;
}

@keyframes orbit-spin-1 {
  0%   { transform: rotateX(25deg) rotateZ(0deg); }
  100% { transform: rotateX(25deg) rotateZ(360deg); }
}

@keyframes orbit-spin-2 {
  0%   { transform: rotateX(65deg) rotateZ(0deg); }
  100% { transform: rotateX(65deg) rotateZ(-360deg); }
}

@keyframes orbit-spin-3 {
  0%   { transform: rotateX(80deg) rotateZ(0deg); }
  100% { transform: rotateX(80deg) rotateZ(360deg); }
}

.orbit-dot {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
  animation: orbit-dot-drift 4s ease-in-out infinite;
  animation-delay: var(--dot-delay, 0s);
  transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-200px);
}

.orbit-2 .orbit-dot {
  width: 6px;
  height: 6px;
  margin-left: -3px;
  top: -3px;
  background: rgba(167, 139, 250, 0.4);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.3);
  transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-140px);
}

.orbit-3 .orbit-dot {
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  top: -3.5px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
  transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-175px);
}

.orbit-dot.accent {
  background: rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

@keyframes orbit-dot-drift {
  0%, 100% { opacity: 0.4; transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-200px) scale(1); }
  50%      { opacity: 1;   transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-200px) scale(1.5); }
}

.orbit-2 .orbit-dot {
  animation-name: orbit-dot-drift-2;
  transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-140px);
}
@keyframes orbit-dot-drift-2 {
  0%, 100% { opacity: 0.3; transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-140px) scale(1); }
  50%      { opacity: 0.8; transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-140px) scale(1.4); }
}

.orbit-3 .orbit-dot {
  animation-name: orbit-dot-drift-3;
  transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-175px);
}
@keyframes orbit-dot-drift-3 {
  0%, 100% { opacity: 0.2; transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-175px) scale(0.8); }
  50%      { opacity: 0.7; transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-175px) scale(1.3); }
}

/* ============================================================ */
/* FLOATING ASSET DATA NODES                                   */
/* ============================================================ */
.asset-node {
  position: absolute;
  width: 48px;
  height: 48px;
  z-index: 3;
  animation: node-float 6s ease-in-out infinite;
}

.asset-node .an-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.15), transparent 70%);
  animation: node-glow-pulse 3s ease-in-out infinite;
}

.asset-node .an-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(11, 13, 26, 0.7);
  border: 1px solid rgba(139, 92, 246, 0.2);
  backdrop-filter: blur(4px);
  color: rgba(167, 139, 250, 0.6);
  font-size: 14px;
  transition: all 0.3s ease;
}

.an-1 { top: 12%; left: 10%; animation-delay: 0s; }
.an-2 { top: 8%;  right: 10%; animation-delay: 0.5s; }
.an-3 { bottom: 20%; left: 5%; animation-delay: 1s; }
.an-4 { bottom: 15%; right: 8%; animation-delay: 1.5s; }
.an-5 { top: 35%; right: 3%; animation-delay: 2s; }
.an-6 { top: 25%; left: 3%; animation-delay: 2.5s; }

@keyframes node-float {
  0%, 100% { transform: translateY(0); }
  25%      { transform: translateY(-12px); }
  50%      { transform: translateY(-6px); }
  75%      { transform: translateY(-18px); }
}

@keyframes node-glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.2); }
}

/* ============================================================ */
/* CONNECTION LINES — ANIMATED LIGHT PULSES                   */
/* ============================================================ */
.connection-lines-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.conn-line {
  stroke-dasharray: 8 600;
  stroke-dashoffset: 0;
  animation: pulse-line 4s ease-in-out infinite;
}

@keyframes pulse-line {
  0%   { stroke-dashoffset: 600; opacity: 0; }
  20%  { opacity: 0.8; }
  80%  { opacity: 0.4; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.depth-grid {
  animation: depth-pulse 6s ease-in-out infinite;
}

@keyframes depth-pulse {
  0%, 100% { opacity: 0.04; }
  50%      { opacity: 0.08; }
}

/* ============================================================ */
/* LIGHT BEAMS — SWEEPING GLOW EFFECTS                        */
/* ============================================================ */
.light-beam {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
}

.beam-1 {
  width: 300px;
  height: 300px;
  margin-left: -150px;
  margin-top: -150px;
  background: radial-gradient(ellipse, rgba(139, 92, 246, 0.04), transparent 70%);
  animation: beam-breathe 5s ease-in-out infinite;
}

.beam-2 {
  width: 200px;
  height: 500px;
  margin-left: -100px;
  margin-top: -250px;
  background: linear-gradient(180deg, transparent, rgba(167, 139, 250, 0.03), transparent);
  animation: beam-sweep 8s ease-in-out infinite;
  transform-origin: center center;
}

.beam-3 {
  width: 500px;
  height: 200px;
  margin-left: -250px;
  margin-top: -100px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02), transparent);
  animation: beam-sweep-h 10s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes beam-breathe {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.3); }
}

@keyframes beam-sweep {
  0%   { transform: rotate(0deg) scaleY(1); opacity: 0.2; }
  50%  { transform: rotate(180deg) scaleY(1.5); opacity: 0.5; }
  100% { transform: rotate(360deg) scaleY(1); opacity: 0.2; }
}

@keyframes beam-sweep-h {
  0%   { transform: rotate(0deg) scaleX(1); opacity: 0.1; }
  50%  { transform: rotate(180deg) scaleX(1.4); opacity: 0.3; }
  100% { transform: rotate(360deg) scaleX(1); opacity: 0.1; }
}

/* ============================================================ */
/* RESPONSIVE — TAME DOWN 3D ON MOBILE                        */
/* ============================================================ */
@media (max-width: 768px) {
  .cube-wrapper {
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
  }
  .cube-face {
    width: 80px;
    height: 80px;
  }
  .cube-face.front  { transform: translateZ(40px); }
  .cube-face.back   { transform: rotateY(180deg) translateZ(40px); }
  .cube-face.left   { transform: rotateY(-90deg) translateZ(40px); }
  .cube-face.right  { transform: rotateY(90deg) translateZ(40px); }
  .cube-face.top    { transform: rotateX(90deg) translateZ(40px); }
  .cube-face.bottom { transform: rotateX(-90deg) translateZ(40px); }

  .orbit-1 { width: 260px; height: 260px; margin-left: -130px; margin-top: -130px; }
  .orbit-2 { width: 180px; height: 180px; margin-left: -90px; margin-top: -90px; }
  .orbit-3 { width: 220px; height: 220px; margin-left: -110px; margin-top: -110px; }

  .orbit-dot {
    transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-130px);
  }
  .orbit-2 .orbit-dot {
    transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-90px);
  }
  .orbit-3 .orbit-dot {
    transform: rotateZ(calc(var(--dot-angle, 0deg))) translateY(-110px);
  }

  .asset-node { width: 36px; height: 36px; }
  .asset-node .an-icon { font-size: 11px; }

  .an-1 { top: 10%; left: 5%; }
  .an-2 { top: 8%;  right: 5%; }
  .an-3 { bottom: 25%; left: 3%; }
  .an-4 { bottom: 20%; right: 3%; }
  .an-5 { top: 40%; right: 1%; }
  .an-6 { top: 20%; left: 1%; }
}

@media (max-width: 480px) {
  .cube-wrapper { display: none; }
  .orbit-ring-3d { display: none; }
  .asset-node { display: none; }
  .connection-lines-svg { display: none; }
  .light-beam { display: none; }
  /* Hide complex SVG backgrounds on mobile for performance */
  #who-we-serve > .absolute.inset-0.z-0,
  #modules > .absolute.inset-0.z-0,
  #why-us > .absolute.inset-0.z-0,
  #contact > .absolute.inset-0.z-0 { opacity: 0.15; }
  /* Reduce particle animations on mobile */
  .particle-field { display: none; }
  /* Reduce counter font size on mobile */
  .counter-value { font-size: 2rem !important; }
  /* Mobile heading sizes */
  .text-5xl { font-size: 2rem !important; }
  .text-4xl { font-size: 1.75rem !important; }
  .text-3xl { font-size: 1.5rem !important; }
}

@media (max-width: 768px) {
  /* Reduce large decorative backgrounds opacity further */
  #who-we-serve > .absolute.inset-0.z-0,
  #modules > .absolute.inset-0.z-0,
  #why-us > .absolute.inset-0.z-0,
  #contact > .absolute.inset-0.z-0 { opacity: 0.1; }
  /* Prevent hero 3D logo from causing horizontal scroll */
  #dijasoft-3d-logo { max-width: 90vw !important; max-height: 90vw !important; }
}

/* ============================================================ */
/* 18. WHO WE SERVE — 3D ANIMATED ICONS                       */
/* ============================================================ */

.icon-3d {
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.15));
}

.ai-cloud-shape { animation: ai-cloud-float 4s ease-in-out infinite; }
@keyframes ai-cloud-float { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-2px); opacity: 0.8; } }
.ai-dot { animation: ai-dot-pulse 2s ease-in-out infinite; }
@keyframes ai-dot-pulse { 0%, 100% { opacity: 0.3; r: 1; } 50% { opacity: 1; r: 2; } }
.ai-conn { animation: ai-conn-fade 3s ease-in-out infinite; }
@keyframes ai-conn-fade { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.4; } }
.ai-core-pulse { animation: ai-core-pulse 3s ease-in-out infinite; }
@keyframes ai-core-pulse { 0%, 100% { opacity: 0.1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.5); } }

.colo-building { animation: colo-float 5s ease-in-out infinite; }
@keyframes colo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.colo-window { animation: colo-window-blink 3s ease-in-out infinite; }
@keyframes colo-window-blink { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.6; } }
.colo-antenna-pulse { animation: colo-antenna 1.5s ease-in-out infinite; }
@keyframes colo-antenna { 0%, 100% { opacity: 0.4; r: 1.5; } 50% { opacity: 1; r: 2; } }

.hyperscale-data { animation: hyp-data 2.5s ease-in-out infinite; }
@keyframes hyp-data { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.3; } }
.hyperscale-arrow { animation: hyp-arrow 2s ease-in-out infinite; }
@keyframes hyp-arrow { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.hyperscale-arrow-head { animation: hyp-arrow 2s ease-in-out infinite; }
.hyperscale-glow { animation: hyp-glow 2s ease-in-out infinite; }
@keyframes hyp-glow { 0%, 100% { opacity: 0.3; r: 2; } 50% { opacity: 1; r: 3; } }

.pe-segment { animation: pe-grow 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pe-grow { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.4; } }
.pe-dollar { animation: pe-dollar 2s ease-in-out infinite; }
@keyframes pe-dollar { 0%, 100% { opacity: 0.4; font-size: 6; } 50% { opacity: 0.8; font-size: 7; } }

.pi-head { animation: pi-breathe 4s ease-in-out infinite; }
.pi-body { animation: pi-breathe 4s ease-in-out infinite; }
@keyframes pi-breathe { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.5; } }
.pi-orbit-ring { animation: pi-orbit 6s linear infinite; transform-origin: 24px 24px; }
@keyframes pi-orbit { 0% { transform: rotate(-15deg) rotateZ(0deg); } 100% { transform: rotate(-15deg) rotateZ(360deg); } }
.pi-orbit-dot { animation: pi-dot-orbit 3s ease-in-out infinite; }
@keyframes pi-dot-orbit { 0%, 100% { opacity: 0.2; r: 1; } 50% { opacity: 1; r: 1.8; } }

.reit-bar { animation: reit-bar-rise 2.5s ease-in-out infinite; transform-origin: bottom; }
@keyframes reit-bar-rise { 0%, 100% { opacity: 0.2; } 30% { opacity: 0.5; } 60% { opacity: 0.3; } }
.reit-bar-glow { animation: reit-glow 2.5s ease-in-out infinite; }
@keyframes reit-glow { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.3; } }
.reit-trend { animation: reit-trend 3s ease-in-out infinite; stroke-dasharray: 100; stroke-dashoffset: 0; }

.am-conn { animation: am-conn-pulse 3s ease-in-out infinite; }
@keyframes am-conn-pulse { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.25; } }
.am-node { animation: am-node-pulse 3s ease-in-out infinite; }
@keyframes am-node-pulse { 0%, 100% { opacity: 0.12; r: 2.5; } 50% { opacity: 0.3; r: 3; } }
.am-node-core { animation: am-core 2s ease-in-out infinite; }
@keyframes am-core { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.am-data-flow { animation: am-data-flow 3s linear infinite; }
@keyframes am-data-flow { 0% { opacity: 0; transform: translateY(0); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(30px); } }

.lease-ring { animation: lease-ring-expand 3s ease-out infinite; }
@keyframes lease-ring-expand { 0% { opacity: 0.4; r: 12; } 50% { opacity: 0.1; r: 18; } 100% { opacity: 0; r: 22; } }
.lease-sparkle { animation: lease-sparkle 2s ease-in-out infinite; }
@keyframes lease-sparkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.2); } }

.ib-briefcase { animation: ib-float 4s ease-in-out infinite; }
@keyframes ib-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.ib-chart { animation: ib-chart-draw 3s ease-in-out infinite; stroke-dasharray: 60; stroke-dashoffset: 0; }
.ib-dot { animation: ib-dot-pulse 2s ease-in-out infinite; }
@keyframes ib-dot-pulse { 0%, 100% { opacity: 0.4; r: 1.5; } 50% { opacity: 1; r: 2; } }
.ib-dollar { animation: ib-dollar-float 3s ease-in-out infinite; }
@keyframes ib-dollar-float { 0%, 100% { opacity: 0.1; transform: translateY(0); } 50% { opacity: 0.4; transform: translateY(-3px); } }
.ib-lock { animation: ib-lock-blink 2s ease-in-out infinite; }
@keyframes ib-lock-blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ============================================================ */
/* 19. PLATFORM BENTO GRID — 3D ANIMATED ICONS                */
/* ============================================================ */

.dl-timeline { animation: dl-draw 3s ease-in-out infinite; stroke-dasharray: 100; }
@keyframes dl-draw { 0%, 100% { stroke-dashoffset: 0; opacity: 0.3; } 50% { stroke-dashoffset: 30; opacity: 0.7; } }
.dl-node { animation: dl-node-pulse 2.5s ease-in-out infinite; }
@keyframes dl-node-pulse { 0%, 100% { opacity: 0.3; r: 2; } 50% { opacity: 0.8; r: 3; } }
.dl-endpoint { animation: dl-endpoint 2.5s ease-in-out infinite; }
@keyframes dl-endpoint { 0%, 100% { opacity: 0.5; r: 3; } 50% { opacity: 1; r: 4; } }
.dl-pulse { animation: dl-pulse 3s ease-out infinite; }
@keyframes dl-pulse { 0% { opacity: 0.4; r: 5; } 50% { opacity: 0.1; r: 10; } 100% { opacity: 0; r: 14; } }

.cp-person { animation: cp-breathe 3s ease-in-out infinite; }
@keyframes cp-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
.cp-conn { animation: cp-conn-pulse 2s ease-in-out infinite; }
@keyframes cp-conn-pulse { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.4; } }
.cp-dot { animation: cp-dot-orbit 2.5s ease-in-out infinite; }
@keyframes cp-dot-orbit { 0%, 100% { opacity: 0.2; r: 1; } 50% { opacity: 0.7; r: 1.5; } }

.fa-bar { animation: fa-bar-rise 2s ease-in-out infinite; }
@keyframes fa-bar-rise { 0%, 100% { opacity: 0.2; } 30% { opacity: 0.5; } 60% { opacity: 0.3; } }
.fa-bar-glow { animation: fa-bar-glow 2s ease-in-out infinite; }
@keyframes fa-bar-glow { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.3; } }
.fa-trend { animation: fa-trend 3s ease-in-out infinite; stroke-dasharray: 60; }

.ai-brain { animation: ai-brain-pulse 4s ease-in-out infinite; }
@keyframes ai-brain-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
.ai-n-dot { animation: ai-n-dot 2s ease-in-out infinite; }
@keyframes ai-n-dot { 0%, 100% { opacity: 0.3; r: 1; } 50% { opacity: 0.8; r: 1.8; } }
.ai-n-conn { animation: ai-n-conn 2.5s ease-in-out infinite; }
@keyframes ai-n-conn { 0%, 100% { opacity: 0.06; } 50% { opacity: 0.2; } }
.ai-n-core { animation: ai-n-core 3s ease-in-out infinite; }
@keyframes ai-n-core { 0%, 100% { opacity: 0.05; r: 3; } 50% { opacity: 0.15; r: 5; } }

/* ============================================================ */
/* 20. BENEFITS SECTION — 3D ANIMATED ICONS                   */
/* ============================================================ */

.ben-bolt { animation: ben-bolt 2.5s ease-in-out infinite; }
@keyframes ben-bolt { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }
.ben-ring { animation: ben-ring-expand 3s ease-out infinite; }
@keyframes ben-ring-expand { 0% { opacity: 0.3; r: 12; } 50% { opacity: 0.08; r: 16; } 100% { opacity: 0; r: 18; } }
.ben-core { animation: ben-core 2s ease-in-out infinite; }
@keyframes ben-core { 0%, 100% { opacity: 0.05; r: 3; } 50% { opacity: 0.15; r: 4; } }

.ben-gauge { animation: ben-gauge-draw 3s ease-in-out infinite; }
@keyframes ben-gauge-draw { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } }
.ben-needle { animation: ben-needle 4s ease-in-out infinite; transform-origin: 20px 28px; }
@keyframes ben-needle { 0%, 100% { transform: rotate(-5deg); opacity: 0.4; } 50% { transform: rotate(10deg); opacity: 0.8; } }

.ben-chart-line { animation: ben-chart 3s ease-in-out infinite; stroke-dasharray: 60; }
@keyframes ben-chart { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 15; } }
.ben-chart-fill { animation: ben-fill 3s ease-in-out infinite; }
@keyframes ben-fill { 0%, 100% { opacity: 0.04; } 50% { opacity: 0.1; } }
.ben-chart-dot { animation: ben-dot-pulse 2.5s ease-in-out infinite; }
@keyframes ben-dot-pulse { 0%, 100% { opacity: 0.3; r: 1.5; } 50% { opacity: 0.8; r: 2; } }

.ben-gem { animation: ben-gem-float 4s ease-in-out infinite; }
@keyframes ben-gem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.ben-gem-facet { animation: ben-gem-shine 3s ease-in-out infinite; }
@keyframes ben-gem-shine { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.2; } }
.ben-sparkle { animation: ben-sparkle 2.5s ease-in-out infinite; }
@keyframes ben-sparkle { 0%, 100% { opacity: 0; r: 0.5; } 50% { opacity: 0.3; r: 1.5; } }

/* ============================================================ */
/* 21. WHY US SECTION — 3D ANIMATED ICONS                     */
/* ============================================================ */

.wh-branch { animation: wh-branch 3s ease-in-out infinite; }
@keyframes wh-branch { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.5; } }
.wh-branch-off { animation: wh-branch-off 3s ease-in-out infinite; }
@keyframes wh-branch-off { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.4; } }
.wh-node-pulse { animation: wh-node 2s ease-in-out infinite; }
@keyframes wh-node { 0%, 100% { opacity: 0.4; r: 1; } 50% { opacity: 1; r: 1.5; } }

.wh-ring { animation: wh-ring 6s linear infinite; }
@keyframes wh-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.wh-arrow { animation: wh-arrow-pulse 2.5s ease-in-out infinite; }
@keyframes wh-arrow-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }
.wh-arrow-head { animation: wh-arrow-pulse 2.5s ease-in-out infinite; }
.wh-ring-core { animation: wh-core-pulse 2s ease-in-out infinite; }
@keyframes wh-core-pulse { 0%, 100% { opacity: 0.4; r: 1; } 50% { opacity: 1; r: 1.3; } }

.wh-pred-line { animation: wh-pred 3s ease-in-out infinite; stroke-dasharray: 60; }
@keyframes wh-pred { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 20; } }
.wh-forecast { animation: wh-forecast 3s ease-in-out infinite; }
@keyframes wh-forecast { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.4; } }
.wh-pred-dot { animation: wh-pred-dot 2.5s ease-in-out infinite; }
@keyframes wh-pred-dot { 0%, 100% { opacity: 0.3; r: 1.5; } 50% { opacity: 0.8; r: 2; } }
.wh-forecast-glow { animation: wh-forecast-glow 3s ease-in-out infinite; }
@keyframes wh-forecast-glow { 0%, 100% { opacity: 0.05; r: 2; } 50% { opacity: 0.2; r: 3.5; } }

.wh-headset { animation: wh-headset 3s ease-in-out infinite; }
@keyframes wh-headset { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
.wh-sound { animation: wh-sound-wave 2s ease-in-out infinite; }
@keyframes wh-sound-wave { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.4; } }

/* ============================================================ */
/* 22. DATA CENTER DIFFERENCE — 3D CHIP ICON                  */
/* ============================================================ */
.dc-chip { animation: dc-chip-float 4s ease-in-out infinite; }
@keyframes dc-chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.dc-trace { animation: dc-trace 2s ease-in-out infinite; }
@keyframes dc-trace { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.25; } }
.dc-pin { animation: dc-pin 2.5s ease-in-out infinite; }
@keyframes dc-pin { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.4; } }
.dc-led { animation: dc-led 1.5s ease-in-out infinite; }
@keyframes dc-led { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.7; } }

/* ============================================================ */
/* 23. DEAL LIFECYCLE — 3D DATA CENTER WORLD BACKGROUND       */
/* ============================================================ */

.world-stars .star-twinkle { animation: star-twinkle 4s ease-in-out infinite; }
@keyframes star-twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.6; } }

.world-building { animation: bldg-float 6s ease-in-out infinite; }
@keyframes bldg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.bldg-windows { animation: bldg-win 3s ease-in-out infinite; }
@keyframes bldg-win { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
.bldg-antenna-pulse { animation: bldg-ant 1.5s ease-in-out infinite; }
@keyframes bldg-ant { 0%, 100% { opacity: 0.3; r: 2; } 50% { opacity: 1; r: 2.5; } }
.bldg-led { animation: bldg-led 2s ease-in-out infinite; }
@keyframes bldg-led { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.8; } }

.cell-signal { animation: cell-wave 2s ease-in-out infinite; }
@keyframes cell-wave { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.2; } }

.satellite { animation: sat-orbit 20s linear infinite; }
.sat-1 { animation: sat-orbit-1 25s linear infinite; }
@keyframes sat-orbit-1 { 0% { transform: translate(180px, 180px) rotate(0deg); } 25% { transform: translate(260px, 160px) rotate(5deg); } 50% { transform: translate(200px, 120px) rotate(0deg); } 75% { transform: translate(140px, 150px) rotate(-5deg); } 100% { transform: translate(180px, 180px) rotate(0deg); } }
.sat-2 { animation: sat-orbit-2 30s linear infinite; }
@keyframes sat-orbit-2 { 0% { transform: translate(850px, 140px) rotate(0deg); } 25% { transform: translate(940px, 120px) rotate(-5deg); } 50% { transform: translate(880px, 80px) rotate(0deg); } 75% { transform: translate(800px, 110px) rotate(5deg); } 100% { transform: translate(850px, 140px) rotate(0deg); } }
.sat-3 { animation: sat-orbit-3 35s linear infinite; }
@keyframes sat-orbit-3 { 0% { transform: translate(500px, 80px) rotate(0deg); } 25% { transform: translate(580px, 60px) rotate(3deg); } 50% { transform: translate(520px, 40px) rotate(0deg); } 75% { transform: translate(440px, 55px) rotate(-3deg); } 100% { transform: translate(500px, 80px) rotate(0deg); } }
.sat-beam { animation: sat-beam 2s ease-in-out infinite; }
@keyframes sat-beam { 0%, 100% { opacity: 0.3; r: 1; } 50% { opacity: 1; r: 1.5; } }
.sat-downlink { animation: sat-downlink 3s ease-in-out infinite; }
@keyframes sat-downlink { 0%, 100% { opacity: 0.02; } 50% { opacity: 0.08; } }

.fiber-pulse { animation: fiber-pulse 4s ease-in-out infinite; }
@keyframes fiber-pulse { 0% { stroke-dashoffset: 600; opacity: 0; } 5% { opacity: 1; } 45% { opacity: 1; } 55% { opacity: 0; } 100% { stroke-dashoffset: -200; opacity: 0; } }

/* ============================================================ */
/* 20. WHO WE SERVE — NETWORK TOPOLOGY NODES                   */
/* ============================================================ */
.wws-node-core { animation: wws-core-pulse 2.5s ease-in-out infinite; }
@keyframes wws-core-pulse { 0%, 100% { opacity: 0.2; r: 6; } 50% { opacity: 0.5; r: 8; } }
.wws-float-particle { animation: wws-float 4s ease-in-out infinite; }
@keyframes wws-float { 0%, 100% { opacity: 0; transform: translateY(0); } 50% { opacity: 0.6; transform: translateY(-10px); } }

/* ============================================================ */
/* 21. CONNECTED MODULES — CIRCUIT BOARD ANIMATIONS            */
/* ============================================================ */
.cm-trace { animation: cm-trace-pulse 2s ease-in-out infinite; }
@keyframes cm-trace-pulse { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.25; } }
.cm-node-pulse { animation: cm-node 2.5s ease-in-out infinite; }
@keyframes cm-node { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.4; } }
.cm-chip-glow { animation: cm-chip 2s ease-in-out infinite; }
@keyframes cm-chip { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.35; } }
.cm-data-dot { animation: cm-data 3s ease-in-out infinite; }
@keyframes cm-data { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0.8; } 100% { opacity: 0; transform: translateX(20px); } }

/* ============================================================ */
/* 22. WHY DIJASOFT — SERVER RACK ANIMATIONS                   */
/* ============================================================ */
.sr-rack { animation: sr-float 6s ease-in-out infinite; }
@keyframes sr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.sr-led { animation: sr-led-blink 1.5s ease-in-out infinite; }
@keyframes sr-led-blink { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.7; } }
.sr-led-fast { animation: sr-led-fast 0.8s ease-in-out infinite; }
@keyframes sr-led-fast { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.9; } }
.sr-data-stream { animation: sr-stream 2.5s linear infinite; }
@keyframes sr-stream { 0% { stroke-dashoffset: 200; opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.sr-heat-wave { animation: sr-heat 4s ease-in-out infinite; }
@keyframes sr-heat { 0%, 100% { opacity: 0.02; } 50% { opacity: 0.08; } }

/* ============================================================ */
/* 23. GET IN TOUCH — RADAR / SIGNAL ANIMATIONS                */
/* ============================================================ */
.gt-radar-ring { animation: gt-radar 3s ease-out infinite; }
@keyframes gt-radar { 0% { opacity: 0.4; r: 10; } 50% { opacity: 0.1; r: 50; } 100% { opacity: 0; r: 80; } }
.gt-signal-arc { animation: gt-arc 2.5s ease-in-out infinite; }
@keyframes gt-arc { 0%, 100% { opacity: 0.02; } 50% { opacity: 0.1; } }
.gt-dot-pulse { animation: gt-dot 2s ease-in-out infinite; }
@keyframes gt-dot { 0%, 100% { opacity: 0.2; r: 1.5; } 50% { opacity: 0.8; r: 2.5; } }
.gt-node-glow { animation: gt-node 3s ease-in-out infinite; }
@keyframes gt-node { 0%, 100% { opacity: 0.05; stroke-width: 0.8; } 50% { opacity: 0.15; stroke-width: 1.2; } }
.gt-sweep { animation: gt-sweep 4s linear infinite; }
@keyframes gt-sweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.gt-float-particle { animation: gt-float 5s ease-in-out infinite; }
@keyframes gt-float { 0%, 100% { opacity: 0; transform: translateY(0); } 50% { opacity: 0.5; transform: translateY(-15px); } }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/* Custom styles */
#mobile-menu {
  display: none;
}

#mobile-menu.show {
  display: block;
}

/* Form styles - only keeping non-conflicting custom styles */
.form-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.form-input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}