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;
}
:root {
  --violet: #6d28d9;
  --violet-light: #7c3aed;
  --violet-ink: #5b21b6;
  --shadow-soft: 4px 4px 9px rgba(70,70,70,0.14), -4px -4px 9px rgba(255,255,255,0.8);
  --shadow-inset: inset 2px 2px 5px rgba(70,70,70,0.22), inset -2px -2px 5px rgba(255,255,255,0.85);
  --shadow-card: 7px 7px 14px rgba(174,174,192,0.20), -7px -7px 14px rgba(255,255,255,0.95);
}

.las,.lab,.lar{font-size:1.15em;vertical-align:-1px;}
      .input-tab.hidden { display: none !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; content-visibility: hidden !important; }
      .input-tab[data-lazy] { content-visibility: visible !important; contain-intrinsic-size: auto !important; }
      .input-tab:not(.hidden) { margin-top: 0 !important; padding-top: 0 !important; display: block !important; box-sizing: border-box !important; max-width: 100% !important; }
      #inputTabBar, #summaryTabBar { margin: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
      #inputsMain { padding-top: 0 !important; }
      #inputsMain > .input-tab:not(.hidden),
      #inputsMain > .summary-tab:not(.hidden) { margin-top: 0 !important; padding-top: 0 !important; }
      #inputsMain > .sticky { margin-bottom: 0 !important; }
      #inputsMain > .sticky .card { margin-bottom: 0 !important; }
      #input-construction, #input-gpu, #input-rent_roll, #input-rev_exp,
      #input-finance, #input-income, #input-scenario, #input-changelog {
        padding-top: 0 !important; box-sizing: border-box !important; max-width: 100% !important;
      }
      #input-construction > *:first-child,
      #input-construction > div:first-child .card:first-child { margin-top: 0 !important; }
      #input-construction .card { max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
      #input-construction .card:first-child { margin-top: 0 !important; }
      /* Heavy 120-month trackers: rows below the fold don't paint until scrolled to */
      #capacityTable tbody tr, #revenueTrackerTable tbody tr, #otherRevTrackerTable tbody tr { content-visibility: auto; contain-intrinsic-size: 0 28px; }
      #capacityTable, #revenueTrackerTable, #otherRevTrackerTable { contain: layout paint; }
            /* Mobile overflow fixes */
      @media (max-width: 767px) {
        #inputsMain { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
        #inputsMain .card-body { padding: 0.75rem !important; }
        #inputsMain .tabs { gap: 0.25rem; }
        #inputsMain .tabs .tab { padding: 0.5rem 0.6rem; font-size: 0.8rem; white-space: nowrap; }

        /* Touch targets: grow the smallest controls toward ~32px */
        #inputsMain .btn-xs { min-height: 2rem !important; padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
        #inputsMain .btn-xs.btn-square { min-width: 2rem !important; }
        #inputsMain .input-xs, #inputsMain .select-xs { min-height: 2rem !important; }
        #inputsMain .checkbox-xs { width: 1.1rem !important; height: 1.1rem !important; }

        /* Phones: no nested scroll — let tab content flow */
        .input-tab:not(.hidden) { height: auto !important; min-height: 0 !important; overflow: visible !important; }
        /* Summary iframes: shorter on phones (beats 78vh !important) */
        #inputsMain .summary-tab iframe { height: 62vh !important; min-height: 400px !important; }
        .sg-scroll { height: 62vh !important; min-height: 400px !important; }
        /* Sub-tabs: bigger tap targets on touch screens */
        #inputsMain #inputTabBar .tab, #inputsMain #summaryTabBar .tab {
          min-height: 2.25rem !important;
          padding-top: 0.6rem !important;
          padding-bottom: 0.6rem !important;
        }
      }
      /* Rent roll: pin tenant table header on scroll */
      #tenant-table-headers th {
        position: sticky;
        top: 0;
        z-index: 10;
      }
      /* Horizontal scroll for all section cards on every input subtab */
      .input-tab .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
      }
      /* Revenue tab: isolate card scroll */
      #input-rent_roll:not(.hidden) {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
      }
      #input-rent_roll > .card {
        display: block !important;
        position: relative !important;
        overflow: visible !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
      }
      #input-rent_roll > .card:last-child { margin-bottom: 0 !important; }
      /* kill the bleed-through: card-bodies on this tab don't scroll — inner wrappers do */
      #input-rent_roll > .card > .card-body {
        overflow: visible !important;
        overflow-x: visible !important;
      }
      #input-rent_roll #otherRevenueCard {
        position: relative !important;
        z-index: 1 !important;
        background: var(--fallback-b1, #ffffff) !important;
      }
      /* Stack input tabs vertically */
      .input-tab:not(.hidden) {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
      }
      .input-tab .card {
        display: block !important;
        position: relative !important;
        overflow: visible !important;
        width: 100% !important;
        margin-bottom: 1.5rem !important;
      }
      .input-tab .card:last-child { margin-bottom: 0 !important; }
      /* Finance is a grid — keep grid but ensure it doesn't clip */
      #input-finance.grid, #input-finance .grid { overflow: visible !important; }
      /* card-bodies don't scroll — inner wrappers do (prevents overlap/hidden content) */
      .input-tab .card-body {
        overflow: visible !important;
        overflow-x: visible !important;
      }
      /* Inner scroll wrappers keep horizontal scroll */
      .input-tab .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
      /* Revenue Tracker: pin tenant col */
      #revenueTrackerTable .rev-tenant-col {
        position: sticky;
        left: 0;
        z-index: 5;
        background-color: var(--fallback-b1, #ffffff);
        background-image: none;
        box-shadow: 2px 0 0 rgba(0,0,0,0.06);
      }
      #revenueTrackerTable thead .rev-tenant-col {
        /* Sit above the z-10 month headers when both axes stick */
        z-index: 30;
        background-color: var(--fallback-b1, #ffffff);
      }
      /* Revenue Tracker: tint the column nearest today */
      #revenueTrackerTable .rev-current-col {
        background-color: rgba(139, 92, 246, 0.08);
      }
      #revenueTrackerTable thead .rev-current-col {
        background-color: rgba(139, 92, 246, 0.18);
        box-shadow: inset 0 -2px 0 rgba(139, 92, 246, 0.5);
      }
      /* Capacity Tracker: tint + left bar on the row nearest today */
      #capacityTable tr.cap-current-row td {
        background-color: rgba(139, 92, 246, 0.08);
      }
      #capacityTable tr.cap-current-row td:first-child {
        box-shadow: inset 3px 0 0 rgba(139, 92, 246, 0.55);
      }
      /* Edit Tenant Form: unselected tenant-type tab is grayed out */
      #edit_modal_wrapper .tab[data-edit-tab] {
        cursor: pointer;
      }
      #edit_modal_wrapper .tab[data-edit-tab].edit-tab-inactive {
        opacity: 0.45;
        filter: grayscale(0.8);
        user-select: none;
      }
      /* The "switch to edit" hint only shows on the grayed-out (inactive) tabs */
      #edit_modal_wrapper .tab[data-edit-tab] .edit-tab-hint {
        display: none;
        font-weight: normal;
        font-size: 0.75em;
        opacity: 0.85;
      }
      #edit_modal_wrapper .tab[data-edit-tab].edit-tab-inactive .edit-tab-hint {
        display: inline;
      }
      /* Green border around the current rent period row (drives MRR) */
      #edit_modal_wrapper .edit-current-row td {
        border-top: 1px solid #10b981;
        border-bottom: 1px solid #10b981;
      }
      #edit_modal_wrapper .edit-current-row td:first-child {
        border-left: 1px solid #10b981;
      }
      #edit_modal_wrapper .edit-current-row td:last-child {
        border-right: 1px solid #10b981;
      }
      /* Edit Tenant Form: drag the modal by its title bar */
      #edit_modal_wrapper .edit-drag-handle {
        cursor: grab;
        touch-action: none;
        user-select: none;
      }
      #edit_modal_wrapper .modal-box.edit-dragging {
        cursor: grabbing;
        user-select: none;
      }
      /* Opex Assumptions: tighter rows (subtext removed) */
      #unifiedExpenseTable tbody td.col-item,
      #unifiedExpenseTable tbody td.col-edit { padding-top: 0.30rem !important; padding-bottom: 0.30rem !important; line-height: 1.1 !important; }
      #unifiedExpenseTable tbody td.col-item .text-sm { line-height: 1.15 !important; }
      #unifiedExpenseTable tbody tr { --tw-border-spacing-y: 0 !important; }
      /* Inputs subtabs — browser scroll only (no inner vertical scroller) */
      .input-tab .card-body::-webkit-scrollbar { height: 4px; }
      .input-tab .card-body::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
      .input-tab:not(.hidden) { height: auto !important; min-height: 0 !important; overflow: visible !important; }
      /* Operating Performance Tracker: isolated scroll for thumb-drag */
      #opTrackerScroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-width: thin; scrollbar-color: #c4c4cc #e8e8ea; }
      #opTrackerScroll::-webkit-scrollbar { width: 10px; height: 10px; }
      #opTrackerScroll::-webkit-scrollbar-track { background: #e8e8ea; border-radius: 8px; }
      #opTrackerScroll::-webkit-scrollbar-thumb { background: #c4c4cc; border-radius: 8px; border: 2px solid #e8e8ea; }
      #opTrackerScroll::-webkit-scrollbar-thumb:hover { background: #a3a3ab; }
      #opTrackerScroll::-webkit-scrollbar-thumb:active { background: #8d8d99; }
      /* Mobile collapse: hide content below title, show on expand */
      .mc-hidden { display: none !important; }
      .mc-arrow { display: none; }
      @media (max-width: 767px) {
        .mc-arrow { display: inline; }
      }

/* Calculator open: no dimmed backdrop, clicks pass through */
      #calcModal::before { background: transparent !important; backdrop-filter: none !important; }

      /* ═══ NEUMORPHIC CALCULATOR (SOFT UI) ═══ */
      #calcBox {
        pointer-events: auto;
        background: #EBECF1 !important;
        border: none !important;
        border-radius: 24px !important;
        box-shadow:
          9px 9px 18px rgba(163,177,198,0.55),
          -9px -9px 18px rgba(255,255,255,0.9),
          0 15px 45px rgba(0,0,0,0.25) !important;
      }
      #calcHeader {
        background: transparent !important;
        border-bottom: none !important;
      }
      #calcHeader h3 { color: #353535 !important; }
      #calcHeader h3 i { color: var(--violet) !important; }
      #calcHeader .btn {
        background: #EBECF1 !important;
        border: none !important;
        color: #353535 !important;
        box-shadow: 3px 3px 6px rgba(163,177,198,0.55), -3px -3px 6px rgba(255,255,255,0.9) !important;
      }
      #calcHeader .btn:active {
        box-shadow: inset 2px 2px 4px rgba(163,177,198,0.6), inset -2px -2px 4px rgba(255,255,255,0.9) !important;
      }

      /* The screen: recessed well pressed into the surface */
      #calcBox .calc-screen {
        background: #EBECF1 !important;
        border-radius: 18px 18px 10px 10px !important;
        padding: 0.75rem 1rem !important;
        box-shadow:
          inset 3px 3px 7px rgba(163,177,198,0.55),
          inset -3px -3px 7px rgba(255,255,255,0.9) !important;
      }
      #calcBox .calc-screen .btn {
        background: #EBECF1 !important;
        border: none !important;
        box-shadow: 2px 2px 5px rgba(163,177,198,0.55), -2px -2px 5px rgba(255,255,255,0.9) !important;
      }
      #calcBox .calc-screen .btn:active {
        box-shadow: inset 2px 2px 4px rgba(163,177,198,0.6), inset -2px -2px 4px rgba(255,255,255,0.9) !important;
      }
      #calcDisplay { color: #353535 !important; }
      #calcExpr { color: #8a8a8a !important; }

      /* Keys: raised circles carved from the same surface */
      #calcBox .grid .btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        border: none !important;
        background: #EBECF1 !important;
        color: #373737 !important;
        font-size: 1.05rem !important;
        box-shadow:
          4.5px 4.5px 9px rgba(163,177,198,0.6),
          -4.5px -4.5px 9px rgba(255,255,255,0.95) !important;
        transition: box-shadow .15s ease, transform .1s ease !important;
      }
      #calcBox .grid .btn:hover {
        transform: translateY(-1px);
        box-shadow:
          6px 6px 12px rgba(163,177,198,0.65),
          -6px -6px 12px rgba(255,255,255,1) !important;
      }
      #calcBox .grid .btn:active {
        transform: translateY(0);
        box-shadow:
          inset 2.5px 2.5px 5px rgba(163,177,198,0.65),
          inset -2.5px -2.5px 5px rgba(255,255,255,0.95) !important;
      }
      /* Operator keys (÷ × − +): violet accent */
      #calcBox .grid .btn-primary {
        background: #EBECF1 !important;
        color: var(--violet) !important;
      }
      /* Equals key: green accent */
      #calcBox .grid .btn-accent {
        background: #EBECF1 !important;
        color: #20BF6B !important;
        font-weight: 700 !important;
      }

/* restoring-input-view: scroll-memory only */
      html.restoring-input-view .input-tab.hidden { display: none; }
      html.restoring-input-view .summary-tab.hidden { display: none; }

/* ── Summary General — light white to match nav buttons (#ffffff) ── */
        #summary-general {
          background: #ffffff !important;
          border-radius: 1.2rem;
          padding: 0 !important;
          border: none !important;
        }
        #summary-general .sg-scroll {
          background: #ffffff;
          border-radius: 1.2rem;
        }
        #summary-general .sg-card {
          background: #ffffff !important;
          border: none !important;
          border-radius: 1.2rem !important;
          box-shadow: 9px 9px 18px rgba(70,70,70,0.3), -5px -5px 10px rgba(255,255,255,0.6) !important;
        }
        #summary-general .sg-card-header {
          background: #ffffff !important;
          border: none !important;
          border-radius: 1.2rem !important;
          box-shadow: 9px 9px 18px rgba(70,70,70,0.3), -5px -5px 10px rgba(255,255,255,0.6) !important;
        }
        #summary-general .sg-card-soft {
          background: #ffffff !important;
          border: none !important;
          border-radius: 1.2rem !important;
          box-shadow: 6px 6px 12px rgba(70,70,70,0.28), -4px -4px 8px rgba(255,255,255,0.7) !important;
          transition: box-shadow .25s ease, transform .18s ease;
        }
        #summary-general .sg-card-soft:hover {
          box-shadow: 8px 8px 16px rgba(70,70,70,0.34), -5px -5px 10px rgba(255,255,255,0.8) !important;
          transform: translateY(-2px);
        }
        #summary-general .sg-well {
          background: #e8e8ea !important;
          border-radius: 1rem !important;
          box-shadow: inset 5px 5px 10px rgba(70,70,70,0.18), inset -5px -5px 10px rgba(255,255,255,0.95), inset 0 1px 1px rgba(255,255,255,0.9) !important;
        }
        #summary-general .sg-well-soft {
          background: #ffffff !important;
          border-radius: .9rem !important;
          box-shadow: inset 4px 4px 8px rgba(70,70,70,0.16), inset -4px -4px 8px rgba(255,255,255,0.92) !important;
        }
        #summary-general .sg-track {
          background: #e8e8ea !important;
          border-radius: 9999px !important;
          box-shadow: inset 4px 4px 8px rgba(70,70,70,0.18), inset -4px -4px 8px rgba(255,255,255,0.95) !important;
        }
        #summary-general .sg-chip {
          background: #ffffff !important;
          border: none !important;
          border-radius: 9999px !important;
          box-shadow: 3px 3px 6px rgba(70,70,70,0.18), -3px -3px 6px rgba(255,255,255,0.85) !important;
          font-weight: 600;
        }
        #summary-general .sg-chip-warn {
          background: #fff7ed !important;
          box-shadow: 3px 3px 7px rgba(70,70,70,0.2), -3px -3px 7px rgba(255,255,255,0.85), inset 0 0 0 1px rgba(245,158,11,0.2) !important;
        }
        #summary-general .sg-chip-error {
          background: #fef2f2 !important;
          box-shadow: 3px 3px 7px rgba(70,70,70,0.2), -3px -3px 7px rgba(255,255,255,0.85), inset 0 0 0 1px rgba(239,68,68,0.2) !important;
        }
        #summary-general .sg-chip-success {
          background: #ecfdf5 !important;
          box-shadow: 3px 3px 7px rgba(70,70,70,0.2), -3px -3px 7px rgba(255,255,255,0.85), inset 0 0 0 1px rgba(16,185,129,0.2) !important;
        }
        #summary-general .sg-label { letter-spacing: .06em; font-weight: 600; color: #374151 !important; }
        #summary-general .sg-value { text-shadow: none; }
        #summary-general .sg-divider { opacity: 1; border-color: rgba(70,70,70,0.12) !important; }

/* Summary Cashflow/Financing/Waterfall/Scenarios — iframe shells */
      /* All 6 Summary iframes now sit flat on the page — browser scroll only */
      #summary-rent_roll, #summary-construction, #summary-financing, #summary-expenses, #summary-waterfall, #summary-scenarios {
        background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
        height: auto !important; min-height: 0 !important; overflow: visible !important;
      }
      #summary-rent_roll iframe, #summary-construction iframe, #summary-financing iframe, #summary-expenses iframe, #summary-waterfall iframe, #summary-scenarios iframe {
        background: transparent !important; border: none !important; border-radius: 0 !important; display: block; box-shadow: none !important;
        height: auto !important; min-height: 900px !important; width: 100% !important; overflow: visible !important;
      }

#tenant-table-body .tenant-copy-btn{box-shadow:none !important;filter:none !important;--tw-shadow:none !important;--tw-ring-shadow:none !important}#tenant-table-body .tenant-copy-btn:hover{box-shadow:none !important}#tenant-table-body .tenant-edit-btn{position:relative;z-index:1}#tenant-table-body td[data-col="save"]{overflow:visible}
          /* Rent Roll perf: rows below the fold don't paint until scrolled to */
          #tenant-table-body tr { content-visibility: auto; contain-intrinsic-size: 0 32px; }

#otherRevTrackerTable .or-tenant-col {
          position: sticky; left: 0; z-index: 5;
          background-color: var(--fallback-b1, #ffffff);
          background-image: none;
          box-shadow: 2px 0 0 rgba(0,0,0,0.06);
        }
        #otherRevTrackerTable thead .or-tenant-col { z-index: 30; background-color: var(--fallback-b2, #e5e7eb); }
        #otherRevTrackerTable .or-current-col { background-color: rgba(245, 158, 11, 0.10); }
        #otherRevTrackerTable thead .or-current-col { background-color: rgba(245, 158, 11, 0.20); box-shadow: inset 0 -2px 0 rgba(245, 158, 11, 0.55); }
        #otherRevTrackerTable tr.or-total-row td { background-color: rgba(245, 158, 11, 0.08) !important; }
        #otherRevTrackerTable tr.or-total-row td.or-tenant-col { background-color: rgba(245, 158, 11, 0.16) !important; }

#unifiedExpenseScroll{max-width:100%; overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;}
              #unifiedExpenseTable{border-collapse:separate !important; border-spacing:0 !important; width:max-content !important; min-width:100%;}
              #unifiedExpenseTable th,#unifiedExpenseTable td{padding:6px 6px !important; text-align:left !important; white-space:nowrap; background:#e8e8ea;}
              #unifiedExpenseTable thead th{position:sticky; top:0; z-index:5; background:#e8e8ea !important; border-bottom:1px solid #d1d1d6 !important;}
              #unifiedExpenseTable th.sticky-col,#unifiedExpenseTable td.sticky-col{position:sticky; z-index:4; background:#e8e8ea !important; box-shadow:2px 0 6px rgba(0,0,0,0.06);}
              #unifiedExpenseTable th.sticky-col{ z-index:7; }
              #unifiedExpenseTable .col-edit{ left:0; min-width:86px; width:86px; }
              #unifiedExpenseTable th.col-edit, #unifiedExpenseTable td.col-edit{ text-align:center !important; }
              #unifiedExpenseTable .col-item{ left:86px; min-width:260px; white-space:normal !important; max-width:320px; }
              #unifiedExpenseTable td.col-item{white-space:normal !important;}
              #unifiedExpenseTable th.mo,#unifiedExpenseTable td.mo{ text-align:right !important; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; min-width:86px; }
              #unifiedExpenseTable th.mo-yr{ background:#dddbe8 !important; color:#5b21b6 !important; font-size:10px; letter-spacing:0.04em; text-align:center !important; border-left:1px solid #c4b5fd; }
              #unifiedExpenseTable td.mo{ background:#ffffff !important; }
              #unifiedExpenseTable tr:hover td{ background:#efeef4 !important; }
              #unifiedExpenseTable tr:hover td.sticky-col{ background:#efeef4 !important; }
              #unifiedExpenseTable tr.cat-header td{ background:#4c1d95 !important; color:#fff !important; font-weight:700; border-top:2px solid #4c1d95; }
              #unifiedExpenseTable tr.cat-header td *{ color:#fff !important; }
              #unifiedExpenseTable tr.cat-subtotal td{ background:#ede9fe !important; font-weight:700; border-top:1px solid #c4b5fd; border-bottom:2px solid #c4b5fd; }
              #unifiedExpenseTable tr.cat-subtotal td.mo{ background:#ede9fe !important; }

.fin-loan-card { transition: all .15s ease; cursor:pointer; border:2px solid #e4e4e7; }
        .fin-loan-card.selected { border-color:#7c3aed !important; background:#f5f3ff !important; box-shadow:0 4px 12px rgba(124,58,237,.18) !important; }
        .fin-loan-card.selected .fin-check { background:#7c3aed; border-color:#7c3aed; color:#fff; }
        .fin-check { width:22px; height:22px; border:2px solid #d4d4d8; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; color:transparent; transition:all .15s; }
        .fin-sub { display:none; }
        .fin-sub.open { display:block; animation: finIn .2s ease; }
        @keyframes finIn { from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
        .fin-sticky { position: sticky; top: 88px; }
        .fin-slider { accent-color:#7c3aed; }

/* ---- Canvas: light white — matches Inputs nav buttons (#ffffff soft slab) ---- */
  body {
    background: #ffffff !important;
    color: #18181b !important;
  }
  .min-h-screen.bg-base-200, .min-h-screen.bg-\[\#ffffff\] { background: #ffffff !important; }

  /* Scrollbar — on white */
  html{scrollbar-width:thin;scrollbar-color:#c9c9cf #ffffff} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:#ffffff} ::-webkit-scrollbar-thumb{background:#c9c9cf;border-radius:8px;border:2px solid #ffffff} ::-webkit-scrollbar-thumb:hover{background:#a3a3ab}

  /* Cards: compact white panels — merged shadow rules */
  .card{ background:#ffffff!important; border:1px solid transparent!important; border-radius:.75rem!important; box-shadow:7px 7px 14px rgba(174,174,192,0.20), -7px -7px 14px rgba(255,255,255,0.95)!important; transition:box-shadow .15s ease!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  .card:hover{ box-shadow:9px 9px 18px rgba(174,174,192,0.24), -9px -9px 18px rgba(255,255,255,1)!important; }
  .card.border-t-4,.card.border-l-4{ border:none!important; border-top:none!important; border-left:none!important; }

  /* ---- Tab bars: neumorphic pill trays (matches the rent roll filter panel) ---- */
  #inputTabBar, #summaryTabBar {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 3px !important;
    gap: 2px !important;
    margin-top: 0 !important;
    position: relative;
    z-index: 5;
    box-shadow: none !important;
  }
  @media (min-width: 768px) {
    #inputTabBar, #summaryTabBar { margin-top: -0.75rem !important; }
  }
  #inputTabBar .tab, #summaryTabBar .tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: #6b7280 !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    min-height: 0 !important;
    padding: 0.45rem 0.9rem !important;
    transition: box-shadow .25s ease, color .25s ease !important;
  }
  #inputTabBar .tab:hover, #summaryTabBar .tab:hover {
    color: var(--violet) !important;
    background: transparent !important;
    box-shadow: inset 0 -3px 0 -1px rgba(109,40,217,0.6) !important;
  }
  #inputTabBar .tab-active, #summaryTabBar .tab-active {
    background: transparent !important;
    color: var(--violet) !important;
    box-shadow: inset 0 -3px 0 -1px rgba(109,40,217,0.85) !important;
  }
  #inputTabBar .tab-active:hover, #summaryTabBar .tab-active:hover {
    background: transparent !important;
    color: var(--violet) !important;
    box-shadow: inset 0 -3px 0 -1px rgba(109,40,217,0.85) !important;
  }
  #inputTabBar .tab-active::after, #summaryTabBar .tab-active::after {
    content: "✓";
    margin-left: 0.35rem;
    color: var(--violet);
    font-size: 0.7em;
  }

  /* ---- Buttons: match the tab bar white — one light slab like cards ---- */
  .btn { border-radius: 0.5rem !important; transition: all .15s ease !important; }
  .btn-primary {
    background: #7c3aed !important;
    border: 1px solid #7c3aed !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(124,58,237,0.3) !important;
  }
  .btn-primary:hover { background: var(--violet) !important; border-color: var(--violet) !important; filter: none !important; }
  .btn-primary:active { background: #5b21b6 !important; }
  .btn-ghost {
    background: #ffffff !important;
    border: none !important;
    color: #3f3f46 !important;
    box-shadow: 4px 4px 8px rgba(174,174,192,0.16), -4px -4px 8px rgba(255,255,255,1) !important;
  }
  .btn-ghost:hover { background: #ffffff !important; color: #18181b !important; box-shadow: 5px 5px 10px rgba(174,174,192,0.20), -5px -5px 10px rgba(255,255,255,1) !important; }
  .btn-ghost:active { box-shadow: inset 3px 3px 6px rgba(174,174,192,0.20), inset -3px -3px 6px rgba(255,255,255,1) !important; }

  /* ---- Top-right nav buttons: same white slab as nav bar ---- */
  nav .btn-ghost {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0.85rem !important;
    box-shadow: 4px 4px 8px rgba(174,174,192,0.16), -4px -4px 8px rgba(255,255,255,1) !important;
  }
  nav .btn-ghost:hover {
    background: #ffffff !important;
    color: var(--violet) !important;
    box-shadow: 5px 5px 10px rgba(174,174,192,0.20), -5px -5px 10px rgba(255,255,255,1) !important;
  }
  nav .btn-ghost:active {
    box-shadow: inset 3px 3px 6px rgba(174,174,192,0.20), inset -3px -3px 6px rgba(255,255,255,1) !important;
  }

  /* ---- Header action buttons: same white slab as their card ---- */
  #inputsMain .neu-header-btn,
  .neu-header-btn {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0.85rem !important;
    color: #1f2430 !important;
    box-shadow: 4px 4px 8px rgba(174,174,192,0.16), -4px -4px 8px rgba(255,255,255,1) !important;
    transition: box-shadow 150ms ease, transform 150ms ease !important;
  }
  #inputsMain .neu-header-btn:hover,
  .neu-header-btn:hover {
    background: #ffffff !important;
    color: #1f2430 !important;
    box-shadow: 5px 5px 10px rgba(174,174,192,0.20), -5px -5px 10px rgba(255,255,255,1) !important;
    transform: translateY(-1px);
  }
  #inputsMain .neu-header-btn:active,
  .neu-header-btn:active {
    transform: none;
    box-shadow: inset 3px 3px 6px rgba(174,174,192,0.22), inset -3px -3px 6px rgba(255,255,255,1) !important;
  }
  /* keep icon hues but let button text stay dark */
  .neu-header-btn i.text-accent { color: #7c3aed !important; }
  .neu-header-btn i.text-success { color: #16a34a !important; }
  .neu-header-btn i.text-info { color: #0284c7 !important; }
  .btn-outline:not(.neu-header-btn) {
    background: #ffffff !important;
    border: none !important;
    color: #3f3f46 !important;
    box-shadow: 4px 4px 8px rgba(174,174,192,0.16), -4px -4px 8px rgba(255,255,255,1) !important;
  }
  .btn-outline:not(.neu-header-btn):hover { border-color: transparent !important; color: var(--violet) !important; background: #ffffff !important; box-shadow: 5px 5px 10px rgba(174,174,192,0.20), -5px -5px 10px rgba(255,255,255,1) !important; }
  .btn-outline:not(.neu-header-btn):active { box-shadow: inset 3px 3px 6px rgba(174,174,192,0.20), inset -3px -3px 6px rgba(255,255,255,1) !important; }
  .btn-error { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; box-shadow: none !important; }
  .btn-error:hover { background: #b91c1c !important; }

  /* ---- Inputs & selects: white, hairline border, violet focus ---- */
  .input, .select, .textarea, input[type="text"], input[type="number"], input[type="date"], select {
    background: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    border-radius: 0.45rem !important;
    color: #18181b !important;
    box-shadow: none !important;
    font-size: 0.8125rem !important;
  }
  .input:focus, .select:focus, .textarea:focus,
  input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.12) !important;
    outline: none !important;
  }
  .checkbox { border-color: #d4d4d8 !important; }

  /* ---- Recessed wells: light gray data trays, 1px border ---- */
  .bg-base-200, .bg-base-200.rounded-box, .bg-base-200.rounded-xl, .bg-base-200.rounded-lg {
    background: #f4f4f5 !important;
  }
  .bg-base-200.rounded-box, .bg-base-200.rounded-xl, .bg-base-200.rounded-lg,
  .card-body .bg-base-200.rounded-xl, .card .bg-base-200.rounded-lg {
    border: 1px solid #e9e9ec !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
  }
  .bg-base-300, .bg-base-300\/50, .w-full.bg-base-300 { background: #ececef !important; border: 1px solid #e4e4e7 !important; }
  .collapse.bg-base-200 { background: #fafafa !important; border: 1px solid #e9e9ec !important; border-radius: 0.5rem !important; }
  .bg-primary\/5 { background: rgba(124,58,237,0.06) !important; border: 1px solid rgba(124,58,237,0.15) !important; }

  /* ---- Tables: compact, high-density, hairline separators ---- */
  .table { background: transparent !important; }
  .table :where(th, td) {
    border-color: #e9e9ec !important;
    font-size: 0.8125rem !important;
  }
  .table :where(th) {
    background: #fafafa !important;
    color: #52525b !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }
  .table :where(td) { color: #27272a !important; }
  .table-zebra tbody tr:nth-child(even) { background: #fafafa !important; }
  .table tr:hover { background: #f4f4f5 !important; }
  .table .stat-value, .table td.text-success, .table td.text-error,
  .table td.text-primary, .table td.text-secondary, .table td.text-accent, .table td.text-info {
    font-weight: 600 !important;
  }

  /* ---- DaisyUI stats: flat white cards ---- */
  .stats {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
  }
  .stats .stat { background: transparent !important; }
  .stats .stat-title { color: #71717a !important; }
  .stats .stat-desc { color: #71717a !important; }

  /* Badges: flat pills */
  .badge{box-shadow:none!important;border-radius:9999px!important}
  .badge-ghost{background:#f4f4f5!important;color:#3f3f46!important;border:1px solid #e4e4e7!important}
  .badge-outline{background:#fff!important;border:1px solid #d4d4d8!important;color:#3f3f46!important}
  .badge-neutral{background:#ececef!important;color:#3f3f46!important}
  .badge-primary{background:rgba(124,58,237,.10)!important;color:var(--violet)!important;border:1px solid rgba(124,58,237,.25)!important}
  .badge-success{background:rgba(5,150,105,.10)!important;color:#047857!important;border:1px solid rgba(5,150,105,.25)!important}
  .badge-warning{background:rgba(217,119,6,.10)!important;color:#b45309!important;border:1px solid rgba(217,119,6,.25)!important}
  .badge-error{background:rgba(220,38,38,.10)!important;color:#b91c1c!important;border:1px solid rgba(220,38,38,.25)!important}
  .badge-info{background:rgba(2,132,199,.10)!important;color:#0369a1!important;border:1px solid rgba(2,132,199,.25)!important}
  .badge-accent{background:rgba(14,165,233,.10)!important;color:#0284c7!important;border:1px solid rgba(14,165,233,.25)!important}

  /* ---- Dropdowns & modals: white, hairline, soft shadow (no glass) ---- */
  .dropdown-content {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  }
  .dropdown-content .menu li a:hover { background: #f4f4f5 !important; }
  .modal-box {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important;
  }

  /* ---- Progress tracks: neutral ---- */
  .w-full.bg-base-300 { background: #ececef !important; }

  /* ---- KPI glow: killed — flat, calm data ---- */
  .kpi-glow { animation: none !important; box-shadow: none !important; }

  /* ---- Hairline separators ---- */
  .border-b.border-base-200, .border-t.border-base-200, .border-b.border-base-300 { border-color: #e9e9ec !important; }

  /* ---- Text readability: ink hierarchy — :not(i) keeps icons ---- */
  .text-base-content { color: #18181b !important; }
  .text-base-content\/20 { color: #9f9fa8 !important; }
  .text-base-content\/30 { color: #8a8a93 !important; }
  .text-base-content\/40 { color: #71717a !important; }
  .text-base-content\/50 { color: #52525b !important; }
  .text-base-content\/60 { color: #3f3f46 !important; }
  .text-base-content\/70 { color: #27272a !important; }
  .text-\[10px\]:not(i) { font-weight: 600 !important; }
  .text-xs:not(i) { font-weight: 500 !important; }
  .card-title { color: #18181b !important; }

  /* ---- KPI color language: violet=money, green=land, cyan=capacity ---- */
  #summaryCombinedTotal { color: #7c3aed !important; }
  #revTotalMonthly { color: #7c3aed !important; }
  #summaryTotalCost { color: #7c3aed !important; }
  #gdTotalBudget { color: #7c3aed !important; }
  #gdCostPerSqft { color: var(--violet) !important; }
  #summaryLandTotal, #summaryLandCost { color: #047857 !important; }
  #summaryBldgTotal, #summaryBldgCost { color: #7c3aed !important; }
  #summaryTotalMw, #summaryCostPerMw, #summarySqftAdded,
  #gdMw, #gdSqftAdded, #gdCostPerMw { color: #0284c7 !important; }

  /* ---- Reduced motion ---- */
  @media (prefers-reduced-motion: reduce) {
    .card, .btn, .tab { transition: none !important; }
  }

/* Tab bars: shared pill-tray rule must stay last (do not reorder) */


  /* ---- Summary / Inputs mode toggle buttons: square ---- */
  #modeSummaryBtn, #modeInputsBtn {
    border-radius: 0 !important;
  }

  /* ---- Construction Summary Active / All Combined toggle: square ---- */
  .summary-toggle-btn {
    border-radius: 0 !important;
  }

  /* ---- Phase tab source labels: white when active, black when not ---- */
  .tab .phase-source-label {
    color: #000000 !important;
    font-size: 0.6rem !important;
    font-weight: 500 !important;
    text-transform: lowercase !important;
  }
  .tab-active .phase-source-label {
    color: #ffffff !important;
  }

/* One giant raised neumorphic panel holding every Power Summary stat */
  .power-summary-panel {
    background: linear-gradient(145deg, #ffffff, #f2f2f4) !important;
    border: none !important;
    border-radius: 1rem !important;
    box-shadow:
      6px 6px 14px rgba(70,70,70,0.14),
      -6px -6px 14px rgba(255,255,255,0.95),
      inset 0 1px 1px rgba(255,255,255,0.9) !important;
  }
  /* Each stat cell: quiet recessed well inside the panel */
  .power-summary-stat {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0.6rem !important;
    padding: 0.6rem 0.75rem !important;
    box-shadow:
      inset 2px 2px 5px rgba(70,70,70,0.08),
      inset -2px -2px 5px rgba(255,255,255,0.85) !important;
  }
  /* Power Summary: sticky below the nav while scrolling Inputs */
  .power-summary-sticky {
    position: sticky !important;
    top: 5rem !important;
    z-index: 15 !important;
    background: linear-gradient(145deg, #fdfdfe, #f0f0f3) !important;
    border-radius: 1rem !important;
    box-shadow:
      8px 8px 20px rgba(70,70,70,0.18),
      -6px -6px 16px rgba(255,255,255,0.95),
      inset 0 1px 1px rgba(255,255,255,0.9) !important;
  }
  @media (max-width: 767px) {
    /* Phones: nav is static, so pin the summary to the very top */
    .power-summary-sticky { top: 0.5rem !important; }
  }

.construction-summary-cards > div {
    background: linear-gradient(145deg, #ffffff, #f2f2f4) !important;
    border: none !important;
    border-radius: 0.85rem !important;
    box-shadow:
      6px 6px 12px rgba(70,70,70,0.16),
      -5px -5px 10px rgba(255,255,255,0.95),
      inset 0 1px 1px rgba(255,255,255,0.9) !important;
    transition: box-shadow .2s ease, transform .2s ease !important;
  }
  /* Color-matched neumorphic tints — each tile's surface echoes its value color */
  .construction-summary-cards > div:nth-child(1) {
    background: linear-gradient(145deg, #f4effd, #e6dbfa) !important;
    box-shadow: 5px 5px 10px rgba(124,58,237,0.14), -4px -4px 8px rgba(255,255,255,0.95), inset 0 1px 1px rgba(255,255,255,0.9) !important;
  }
  .construction-summary-cards > div:nth-child(2) {
    background: linear-gradient(145deg, #ecfaf2, #d5f0e0) !important;
    box-shadow: 5px 5px 10px rgba(5,150,105,0.12), -4px -4px 8px rgba(255,255,255,0.95), inset 0 1px 1px rgba(255,255,255,0.9) !important;
  }
  .construction-summary-cards > div:nth-child(3) {
    background: linear-gradient(145deg, #f4effd, #e6dbfa) !important;
    box-shadow: 5px 5px 10px rgba(124,58,237,0.12), -4px -4px 8px rgba(255,255,255,0.95), inset 0 1px 1px rgba(255,255,255,0.9) !important;
  }
  .construction-summary-cards > div:nth-child(4),
  .construction-summary-cards > div:nth-child(5) {
    background: linear-gradient(145deg, #f4f6f8, #e6e9ed) !important;
    box-shadow: 5px 5px 10px rgba(71,85,105,0.12), -4px -4px 8px rgba(255,255,255,0.95), inset 0 1px 1px rgba(255,255,255,0.9) !important;
  }
  .construction-summary-cards > div:hover {
    transform: translateY(-2px);
    box-shadow:
      7px 7px 14px rgba(70,70,70,0.14),
      -5px -5px 10px rgba(255,255,255,1),
      inset 0 1px 1px rgba(255,255,255,0.9) !important;
  }
  .construction-summary-cards > div:nth-child(1):hover,
  .construction-summary-cards > div:nth-child(3):hover {
    box-shadow: 7px 7px 14px rgba(124,58,237,0.18), -5px -5px 10px rgba(255,255,255,1), inset 0 1px 1px rgba(255,255,255,0.9) !important;
  }
  .construction-summary-cards > div:nth-child(2):hover {
    box-shadow: 7px 7px 14px rgba(5,150,105,0.16), -5px -5px 10px rgba(255,255,255,1), inset 0 1px 1px rgba(255,255,255,0.9) !important;
  }
  .construction-summary-cards > div:nth-child(4):hover,
  .construction-summary-cards > div:nth-child(5):hover {
    box-shadow: 7px 7px 14px rgba(71,85,105,0.16), -5px -5px 10px rgba(255,255,255,1), inset 0 1px 1px rgba(255,255,255,0.9) !important;
  }
  .construction-summary-cards > div:active {
    transform: translateY(0);
    box-shadow:
      inset 3px 3px 6px rgba(70,70,70,0.14),
      inset -3px -3px 6px rgba(255,255,255,0.9) !important;
  }

/* The raised tray — matches the white card it sits on */
  .join:has([data-view]),
  .join:has(.summary-toggle-btn) {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 3px !important;
    box-shadow:
      var(--shadow-soft) !important;
  }

  /* Every button inside the tray starts flat + muted */
  .join:has([data-view]) .join-item,
  .join:has(.summary-toggle-btn) .join-item {
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    transition: box-shadow .25s ease, color .25s ease, background-color .25s ease, transform .15s ease !important;
  }
  .join:has([data-view]) .join-item.btn-ghost:hover,
  .join:has(.summary-toggle-btn) .join-item.btn-ghost:hover {
    color: #1f2430 !important;
  }

  /* The ACTIVE button (any colored variant) becomes the recessed well */
  .join:has([data-view]) .join-item.btn-primary,
  .join:has([data-view]) .join-item.btn-secondary,
  .join:has([data-view]) .join-item.btn-accent,
  .join:has([data-view]) .join-item.btn-warning,
  .join:has([data-view]) .join-item.btn-info,
  .join:has([data-view]) .join-item.btn-success,
  .join:has([data-view]) .join-item.btn-neutral,
  .join:has(.summary-toggle-btn) .join-item.btn-primary {
    background: #e4e4e8 !important;
    box-shadow:
      inset 2px 2px 5px rgba(70,70,70,0.22),
      inset -2px -2px 5px rgba(255,255,255,0.85) !important;
  }

  /* Accent-colored labels for the selected option (keeps per-card color coding) */
  .join:has([data-view]) .join-item.btn-primary,
  .join:has([data-view]) .join-item.btn-secondary,
  .join:has(.summary-toggle-btn) .join-item.btn-primary { color: var(--violet) !important; }
  .join:has([data-view]) .join-item.btn-accent { color: #c026d3 !important; }
  .join:has([data-view]) .join-item.btn-warning { color: #b45309 !important; }
  .join:has([data-view]) .join-item.btn-info { color: #0e7490 !important; }
  .join:has([data-view]) .join-item.btn-success { color: #047857 !important; }
  .join:has([data-view]) .join-item.btn-neutral { color: #374151 !important; }

  /* Press-in animation on click (matches the reference's pressed keys) */
  .join:has([data-view]) .join-item:active,
  .join:has(.summary-toggle-btn) .join-item:active {
    transform: scale(0.96);
  }

/* The raised tray — matches the white card it sits on (pill shaped) */
  .join:has(.tenant-filter-btn) {
    background: #ffffff !important;
    border-radius: 99vw !important;
    padding: 3px !important;
    box-shadow:
      var(--shadow-soft) !important;
  }

  /* Buttons start flat + muted (rounded to nestle in the pill) */
  .join:has(.tenant-filter-btn) .join-item {
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    border-radius: 99vw !important;
    transition: box-shadow .25s ease, color .25s ease !important;
  }

  /* Hover: violet label + violet underline (the reference's inset glow) */
  .join:has(.tenant-filter-btn) .join-item:hover,
  .join:has(.tenant-filter-btn) .join-item:focus {
    color: var(--violet) !important;
    outline: none !important;
    box-shadow: inset 0 -3px 0 -1px rgba(109,40,217,0.6) !important;
  }

  /* Active filter: violet text + stronger underline + checkmark */
  .join:has(.tenant-filter-btn) .tenant-filter-btn.btn-primary {
    background: transparent !important;
    color: var(--violet) !important;
    box-shadow: inset 0 -3px 0 -1px rgba(109,40,217,0.85) !important;
  }
  .join:has(.tenant-filter-btn) .tenant-filter-btn.btn-primary::after {
    content: "✓";
    margin-left: 0.35rem;
    color: var(--violet);
    font-size: 0.7em;
  }

  /* "Filter:" label — plain muted text inside the panel, no hover/press */
  .join:has(.tenant-filter-btn) .tenant-filter-label {
    display: flex;
    align-items: center;
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    border-radius: 99vw !important;
    box-shadow: none !important;
    cursor: default;
  }
  .join:has(.tenant-filter-btn) .tenant-filter-label:hover,
  .join:has(.tenant-filter-btn) .tenant-filter-label:focus {
    color: #6b7280 !important;
    box-shadow: none !important;
  }

.pf-finder {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.15rem 0.2rem !important;
    box-shadow:
      6px 6px 14px rgba(70,70,70,0.16),
      -5px -5px 12px rgba(255,255,255,0.45) !important;
    transition: box-shadow .25s ease !important;
  }
  .pf-finder:hover {
    box-shadow:
      9px 9px 20px rgba(70,70,70,0.22),
      -7px -7px 14px rgba(255,255,255,0.55) !important;
  }

  .pf-finder__outer {
    display: flex;
    align-items: center;
    padding: 0.15rem 0.7rem;
    border-radius: 0 !important;
    background: #ffffff;
    box-shadow:
      inset 3px 3px 8px rgba(70,70,70,0.18),
      inset -3px -3px 8px rgba(255,255,255,0.6);
  }

  .pf-finder__inner {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0.6rem;
  }

  .pf-finder__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--violet);
    font-size: 0.7rem;
    flex-shrink: 0;
    box-shadow:
      3px 3px 7px rgba(70,70,70,0.22),
      -3px -3px 7px rgba(255,255,255,0.7);
  }

  .pf-finder__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.8rem;
    letter-spacing: 0.4px;
    color: #1f2430;
  }
  .pf-finder__input::placeholder { color: #6b7280; }

  .pf-finder__count {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 600;
    color: #374151;
  }

.pf-glossary-btn {
    background: linear-gradient(to bottom, #ffffff, #f1f3f6) !important;
    border: none !important;
    border-radius: 0 !important;
    color: #1f2430 !important;
    box-shadow:
      inset 0 -0.25em 0.4em -0.3em rgba(255, 255, 255, 0.9),
      4px 4px 9px rgba(70, 70, 70, 0.16),
      -4px -4px 9px rgba(255, 255, 255, 0.8) !important;
    transition: box-shadow .25s ease, transform .15s ease, color .2s ease !important;
  }
  .pf-glossary-btn:hover {
    color: var(--violet) !important;
    box-shadow:
      inset 0 -0.25em 0.4em -0.3em rgba(255, 255, 255, 1),
      6px 6px 12px rgba(70, 70, 70, 0.22),
      -6px -6px 12px rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-1px);
  }
  .pf-glossary-btn:active {
    transform: translateY(0);
    box-shadow:
      inset 3px 3px 7px rgba(70, 70, 70, 0.22),
      inset -3px -3px 7px rgba(255, 255, 255, 0.9),
      2px 2px 5px rgba(70, 70, 70, 0.12),
      -2px -2px 5px rgba(255, 255, 255, 0.6) !important;
  }
  .pf-glossary-btn i { color: var(--violet) !important; }

.pf-current-btn {
    border: none !important;
    border-radius: 0.5rem !important;
    color: #1f2430 !important;
    background: #ffffff !important;
    box-shadow:
      3px 3px 7px rgba(70, 70, 70, 0.16),
      -3px -3px 7px rgba(255, 255, 255, 0.8) !important;
    transition: box-shadow .2s ease, transform .15s ease, color .2s ease !important;
  }
  .pf-current-btn:hover,
  .pf-current-btn:focus-visible {
    box-shadow:
      5px 5px 10px rgba(70, 70, 70, 0.22),
      -5px -5px 10px rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-1px);
  }
  .pf-current-btn:active {
    transform: translateY(0);
    box-shadow:
      3px 3px 7px rgba(70, 70, 70, 0.16),
      -3px -3px 7px rgba(255, 255, 255, 0.8),
      inset 2px 2px 5px rgba(70, 70, 70, 0.22),
      inset -2px -2px 5px rgba(255, 255, 255, 0.9) !important;
  }
  .pf-current-btn i { color: inherit !important; }
  .pf-current-btn .fa-bullseye.text-secondary { color: #0e7490 !important; }
  .pf-current-btn .fa-bullseye.text-info { color: var(--violet) !important; }

#edit_modal_wrapper .tabs:has([data-edit-tab]) {
    background: #ffffff !important;
    border-radius: 0 !important;
    padding: 3px !important;
    box-shadow:
      var(--shadow-soft) !important;
  }

  #edit_modal_wrapper .tab[data-edit-tab] {
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    padding: 0.4rem 1rem !important;
    transition: box-shadow .25s ease, color .25s ease !important;
  }

  #edit_modal_wrapper .tab[data-edit-tab]:hover,
  #edit_modal_wrapper .tab[data-edit-tab]:focus {
    color: var(--violet) !important;
    outline: none !important;
    box-shadow: inset 0 -3px 0 -1px rgba(109,40,217,0.6) !important;
  }

  /* Active tab: violet text + stronger underline + checkmark */
  #edit_modal_wrapper .tab[data-edit-tab].tab-active {
    background: transparent !important;
    color: var(--violet) !important;
    box-shadow: inset 0 -3px 0 -1px rgba(109,40,217,0.85) !important;
  }
  #edit_modal_wrapper .tab[data-edit-tab].tab-active::after {
    content: "✓";
    margin-left: 0.35rem;
    color: var(--violet);
    font-size: 0.7em;
  }

  /* Inactive tabs: muted gray (keeps the "switch to edit" hint visible) */
  #edit_modal_wrapper .tab[data-edit-tab].edit-tab-inactive {
    opacity: 1 !important;
    filter: none !important;
    color: #6b7280 !important;
  }
  #edit_modal_wrapper .tab[data-edit-tab].edit-tab-inactive:hover {
    color: var(--violet) !important;
  }

#edit_modal_wrapper .modal-box,
  #edit_modal_wrapper #edit_modal_body {
    scrollbar-width: thin;
    scrollbar-color: #c9ccd4 #f1f3f6;
  }
  #edit_modal_wrapper .modal-box::-webkit-scrollbar,
  #edit_modal_wrapper #edit_modal_body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  #edit_modal_wrapper .modal-box::-webkit-scrollbar-track,
  #edit_modal_wrapper #edit_modal_body::-webkit-scrollbar-track {
    background: #f1f3f6;
    border-radius: 3px;
  }
  #edit_modal_wrapper .modal-box::-webkit-scrollbar-thumb,
  #edit_modal_wrapper #edit_modal_body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #e4e6ea, #c9ccd4);
    border-radius: 3px;
    box-shadow:
      inset 1px 1px 2px rgba(255, 255, 255, 0.9),
      inset -1px -1px 2px rgba(70, 70, 70, 0.15);
  }
  #edit_modal_wrapper .modal-box::-webkit-scrollbar-thumb:hover,
  #edit_modal_wrapper #edit_modal_body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d5d8df, #b9bdc6);
  }

#tenant-table-body td,
  #tenant-table-body td *:not(i),
  #tenant-table-body td .badge,
  #tenant-table-body td .text-success,
  #tenant-table-body td .text-warning,
  #tenant-table-body td .text-secondary,
  #tenant-table-body td .text-primary,
  #tenant-table-body td .text-info,
  #tenant-table-body td .text-base-content\/30 {
    font-weight: 400 !important;
  }

#tenant-table-body td[data-col="lease_type"] .badge,
  #tenant-table-body td[data-col="status"] .badge {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0.5rem !important;
    font-weight: 400 !important;
    box-shadow:
      3px 3px 6px rgba(70,70,70,0.14),
      -3px -3px 6px rgba(255,255,255,0.8) !important;
    transition: box-shadow .2s ease, transform .15s ease !important;
  }
  #tenant-table-body td[data-col="lease_type"] .badge:hover,
  #tenant-table-body td[data-col="status"] .badge:hover {
    transform: translateY(-1px);
    box-shadow:
      5px 5px 9px rgba(70,70,70,0.20),
      -5px -5px 9px rgba(255,255,255,0.95) !important;
  }
  #tenant-table-body td[data-col="lease_type"] .badge:active,
  #tenant-table-body td[data-col="status"] .badge:active {
    transform: translateY(0);
    box-shadow:
      3px 3px 6px rgba(70,70,70,0.14),
      -3px -3px 6px rgba(255,255,255,0.8),
      inset 2px 2px 4px rgba(70,70,70,0.18),
      inset -2px -2px 4px rgba(255,255,255,0.9) !important;
  }
  /* Accent colors for icons + labels so the pills stay readable */
  #tenant-table-body td[data-col="lease_type"] .badge-warning { color: #b45309 !important; }
  #tenant-table-body td[data-col="lease_type"] .badge-secondary { color: var(--violet) !important; }
  #tenant-table-body td[data-col="lease_type"] .badge-success { color: #047857 !important; }
  #tenant-table-body td[data-col="status"] .badge-neutral { color: #374151 !important; }
  #tenant-table-body td[data-col="status"] .badge-primary { color: var(--violet) !important; }

  /* All column headers are bold */
  #tenant-table-headers th { font-weight: 700 !important; }

.pv-neu {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 0.9rem !important;
    box-shadow:
      4px 4px 9px rgba(70,70,70,0.13),
      -4px -4px 9px rgba(255,255,255,0.75) !important;
  }
  .pv-neu .grid > div {
    border-radius: 0 !important;
  }

/* Group header rows: dark solid + white text, one shade per type */
  #revenueTrackerTable tr.rev-group-header td {
    color: #fff !important;
    background-color: #111827 !important;
  }
  #revenueTrackerTable tr.rev-group-header.rev-group-psf td { background-color: #065f46 !important; }
  #revenueTrackerTable tr.rev-group-header.rev-group-per_kw td { background-color: #c2410c !important; }
  #revenueTrackerTable tr.rev-group-header.rev-group-per_gpu_hr td { background-color: #5b21b6 !important; }
  /* The sticky Tenant column must match the row color (overrides solid fill) */
  #revenueTrackerTable tr.rev-group-header td.rev-tenant-col,
  #revenueTrackerTable tr.rev-group-header.rev-group-psf td.rev-tenant-col { background-color: #065f46 !important; }
  #revenueTrackerTable tr.rev-group-header.rev-group-per_kw td.rev-tenant-col { background-color: #c2410c !important; }
  #revenueTrackerTable tr.rev-group-header.rev-group-per_gpu_hr td.rev-tenant-col { background-color: #5b21b6 !important; }

  /* Subtotal rows: light tint matching each category */
  #revenueTrackerTable tr.rev-subtotal td {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
  }
  #revenueTrackerTable tr.rev-subtotal.rev-group-psf td { background-color: #d9ece4 !important; }
  #revenueTrackerTable tr.rev-subtotal.rev-group-per_kw td { background-color: #fbe3d2 !important; }
  #revenueTrackerTable tr.rev-subtotal.rev-group-per_gpu_hr td { background-color: #e4dbf2 !important; }
  #revenueTrackerTable tr.rev-subtotal.rev-group-psf td.rev-tenant-col { background-color: #d9ece4 !important; }
  #revenueTrackerTable tr.rev-subtotal.rev-group-per_kw td.rev-tenant-col { background-color: #fbe3d2 !important; }
  #revenueTrackerTable tr.rev-subtotal.rev-group-per_gpu_hr td.rev-tenant-col { background-color: #e4dbf2 !important; }

  /* Grand total row: dark + white text */
  #revenueTrackerTable tr.rev-grand-total td {
    background-color: #1f2430 !important;
    color: #fff !important;
  }
  #revenueTrackerTable tr.rev-grand-total td.rev-tenant-col { background-color: #1f2430 !important; }
  #revenueTrackerTable tr.rev-grand-total td .text-secondary { color: #fff !important; }

/* Inputs / Summary mode toggle */
  .join:has(#modeSummaryBtn),
  .join:has(.budget-mode-btn) {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 3px !important;
    box-shadow:
      var(--shadow-soft) !important;
  }

  .join:has(#modeSummaryBtn) .join-item,
  .join:has(.budget-mode-btn) .join-item {
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    font-family: inherit !important;
    line-height: 1.25 !important;
    border-radius: 9px !important;
    transition: box-shadow .25s ease, color .25s ease, background-color .25s ease, transform .15s ease !important;
  }
  .join:has(#modeSummaryBtn) .join-item.btn-ghost:hover,
  .join:has(#modeSummaryBtn) .join-item.btn-outline:hover,
  .join:has(.budget-mode-btn) .join-item.btn-ghost:hover {
    color: #1f2430 !important;
  }

  /* The ACTIVE option becomes the recessed well (matches Monthly/Annual) */
  .join:has(#modeSummaryBtn) .join-item.btn-primary,
  .join:has(.budget-mode-btn) .budget-mode-btn.btn-primary {
    background: #e4e4e8 !important;
    color: var(--violet) !important;
    box-shadow:
      inset 2px 2px 5px rgba(70,70,70,0.22),
      inset -2px -2px 5px rgba(255,255,255,0.85) !important;
  }
  .join:has(#modeSummaryBtn) .join-item.btn-primary i,
  .join:has(.budget-mode-btn) .budget-mode-btn.btn-primary i {
    color: var(--violet) !important;
  }

  /* Press-in animation on click */
  .join:has(#modeSummaryBtn) .join-item:active,
  .join:has(.budget-mode-btn) .join-item:active {
    transform: scale(0.96);
  }

.pf-date-chip {
    background: #ffffff !important;
    border: none !important;
    box-shadow:
      var(--shadow-soft) !important;
    transition: box-shadow .2s ease, transform .15s ease !important;
  }
  .pf-date-chip:hover {
    box-shadow:
      6px 6px 12px rgba(70,70,70,0.20),
      -6px -6px 12px rgba(255,255,255,0.95) !important;
    transform: translateY(-1px);
  }

.srr-scrollbar {
    padding: 0.5rem 0.15rem 0.15rem;
    width: 100%;
  }
  .srr-scrollbar-track {
    position: relative;
    height: 1.1rem;
    border-radius: 99vw;
    background: #e9e9ed;
    box-shadow:
      inset 2px 2px 5px rgba(70,70,70,0.18),
      inset -2px -2px 5px rgba(255,255,255,0.9);
    cursor: pointer;
  }
  .srr-scrollbar-thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 0.9rem;
    min-width: 24px;
    border-radius: 99vw;
    background: linear-gradient(180deg, #a78bfa, #7c3aed);
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow:
      2px 2px 5px rgba(70,70,70,0.25),
      -2px -2px 5px rgba(255,255,255,0.9);
    cursor: grab;
    transition: box-shadow .2s ease;
  }
  .srr-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #c4b5fd, #8b5cf6);
    box-shadow:
      3px 3px 7px rgba(70,70,70,0.30),
      -3px -3px 7px rgba(255,255,255,1);
  }
  .srr-scrollbar-thumb:active {
    cursor: grabbing;
    box-shadow:
      inset 2px 2px 4px rgba(23,13,48,0.3),
      inset -2px -2px 4px rgba(255,255,255,0.4);
  }
  /* Neumorphic results card: breakdown + avg kW line in one card */
  .srr-results-card {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0.75rem !important;
    padding: 0.6rem 1rem !important;
    flex: 1 1 auto;
    min-width: 18rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow:
      var(--shadow-soft) !important;
  }
  .srr-results-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
  }
  .srr-results-kw-line {
    border-top: 1px solid rgba(70,70,70,0.08);
    padding-top: 0.4rem;
  }

  /* Calculator panel: month fields + button + results in one tray */
  .srr-range-panel {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0.9rem !important;
    padding: 1rem 1.1rem !important;
    box-shadow:
      6px 6px 14px rgba(70,70,70,0.14),
      -5px -5px 12px rgba(255,255,255,0.7) !important;
  }
  .srr-range-panel .select {
    background: #ffffff !important;
  }

#input-gpu .text-primary { color: #111827 !important; }
  #input-gpu .text-secondary { color: #111827 !important; }
  #input-gpu .text-info { color: #111827 !important; }
  #input-gpu .btn-secondary { background: #7C3AED !important; border-color: #7C3AED !important; color: #fff !important; }
  #input-gpu .btn-secondary:hover { background: var(--violet) !important; border-color: var(--violet) !important; }
  #input-gpu .bg-secondary\/5 { background: rgba(124,58,237,0.06) !important; }

/* ═══ Summary General — Modern Responsive Dashboard (sticky 260px sidebar + fluid main + 4→3→2→1 grid) ═══ */
/* The whole tab becomes a dashboard that fills the viewport. Sidebar is fixed 260px (240-280 range), full-height, sticky.
   Main content fills remaining width with comfortable padding. Cards use CSS Grid responsive. Mobile → hamburger drawer + 1 col stack. */
#summary-general.sg-dashboard-wrap { background: #f8f7fb !important; border-radius: 0 !important; padding: 0 !important; overflow: visible; display: block; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
#summary-general.sg-dashboard-wrap:not(.hidden) { display: block !important; min-height: 100vh; min-height: 100dvh; }
#summary-general.sg-dashboard-wrap.hidden { display: none !important; }
#summary-general .sg-dashboard { display: flex; gap: 0; min-height: 100vh; min-height: 100dvh; align-items: stretch; }
#summary-general .sg-sidebar { width: 260px; min-width: 260px; max-width: 260px; background: #ffffff; border-right: 1px solid rgba(70,70,70,0.07); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; padding: 1rem 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.9rem; scrollbar-width: thin; scrollbar-color: #d6d3e8 #fff; z-index: 30; flex-shrink: 0; }
#summary-general .sg-sidebar::-webkit-scrollbar { width: 6px; }
#summary-general .sg-sidebar::-webkit-scrollbar-thumb { background: #d6d3e8; border-radius: 99px; }
#summary-general .sg-sidebar-brand { display:flex; align-items:center; gap:0.6rem; padding: 0.2rem 0.35rem 0.7rem; border-bottom: 1px solid rgba(70,70,70,0.06); margin-bottom: 0.2rem; }
#summary-general .sg-sidebar-brand-mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg,#6d28d9,#7c3aed); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; box-shadow: 0 4px 10px rgba(109,40,217,0.25); flex-shrink:0; }
#summary-general .sg-sidebar-nav { display:flex; flex-direction:column; gap:0.22rem; }
#summary-general .sg-sidebar-label { font-size: 9px; letter-spacing: 0.14em; font-weight: 700; color: #9ca3af; text-transform: uppercase; padding: 0.55rem 0.6rem 0.2rem; }
#summary-general .sg-nav-link { display:flex; align-items:center; gap:0.6rem; padding: 0.55rem 0.7rem; border-radius: 0.7rem; font-size: 13px; font-weight: 600; color: #4b5563; text-decoration:none; transition: background .15s, color .15s, box-shadow .15s; cursor:pointer; border: none; background: transparent; width: 100%; text-align:left; }
#summary-general .sg-nav-link i { font-size: 15px; color: #9aa0b3; transition: color .15s; }
#summary-general .sg-nav-link:hover { background: #f3f0ff; color: #5b21b6; }
#summary-general .sg-nav-link:hover i { color: #6d28d9; }
#summary-general .sg-nav-link.is-active { background: linear-gradient(135deg,#6d28d9,#7c3aed); color:#fff !important; box-shadow: 0 4px 12px rgba(109,40,217,0.28); }
#summary-general .sg-nav-link.is-active i { color:#fff !important; }
#summary-general .sg-sidebar-foot { margin-top:auto; padding: 0.75rem 0.6rem 0.1rem; border-top: 1px solid rgba(70,70,70,0.06); }
#summary-general .sg-main { flex: 1; min-width: 0; padding: 1.25rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap: 1rem; background: #f8f7fb; overflow: visible; }
#summary-general .sg-main-topbar { display:none; align-items:center; gap:0.75rem; margin-bottom:0.25rem; }
#summary-general .sg-main-inner { display:flex; flex-direction:column; gap:1rem; max-width: none !important; width:100% !important; margin:0 !important; }
#summary-general .sg-kpi-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:0.85rem; }
#summary-general .sg-mid-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:0.9rem; }
#summary-general .sg-drawer-btn { display:none; align-items:center; gap:0.45rem; background:#fff; border:none; border-radius:0.7rem; padding:0.5rem 0.75rem; font-size:12px; font-weight:700; color:#4c1d95; box-shadow: 3px 3px 8px rgba(70,70,70,0.12), -3px -3px 8px rgba(255,255,255,0.9); cursor:pointer; }
#summary-general .sg-hamburger { display:none; width:40px; height:40px; border-radius:10px; border:1px solid rgba(70,70,70,0.08); background:#fff; align-items:center; justify-content:center; color:#4c1d95; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor:pointer; flex-shrink:0; }
#summary-general .sg-backdrop { position: fixed; inset: 0; background: rgba(15,10,30,0.38); backdrop-filter: blur(2px); z-index: 40; }
#summary-general .sg-sidebar.sg-open { transform: translateX(0) !important; }
@media (max-width: 1280px) { #summary-general .sg-kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1023px) {
  #summary-general .sg-dashboard { flex-direction: column; }
  #summary-general .sg-sidebar { position: fixed; left:0; top:0; height: 100vh; height: 100dvh; z-index: 41; transform: translateX(-105%); transition: transform .26s cubic-bezier(.32,.72,0,1); box-shadow: 10px 0 30px rgba(0,0,0,0.16); border-right:none; border-radius: 0 1rem 1rem 0; padding-top: 0.85rem; }
  #summary-general .sg-main { padding: 0.9rem 0.85rem 1rem; }
  #summary-general .sg-main-topbar { display:flex; }
  #summary-general .sg-hamburger { display:inline-flex; }
  #summary-general .sg-drawer-btn { display:inline-flex; }
  #summary-general .sg-mid-grid { grid-template-columns: 1fr; }
  #summary-general .sg-kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  #summary-general .sg-kpi-grid { grid-template-columns: 1fr; }
  #summary-general .sg-main { padding: 0.75rem 0.75rem 1rem; }
}

/* ── Summary · General: the 2026-10-01 "fluid, full-bleed + hybrid card" layout was REVERTED
   on 2026-10-01 by request — the cards, gaps and column counts below are once again driven by the
   "Modern Responsive Dashboard" block above (4 → 3 → 2 → 1 columns, stacked card interiors).
   A stylesheet with the fluid version still in it is kept at
   app/imports/design_backups/pro_forma_inputs_BEFORE_REVERT_20261002_0313.css                              */

/* ── Summary panels: the 2026-10-01 "fill the frame" widening was REVERTED on 2026-10-01 by
   request. rent roll · opex · construction · financing · waterfall · build each carry
   `max-w-7xl mx-auto` (a centred 1280px column) on their <main> again. The `.pf-wide-main` class
   is no longer used anywhere; its rule was removed. Backup with the wide version in it:
   app/imports/design_backups/pro_forma_inputs_BEFORE_REVERT_20261002_0313.css                            */
/*
 * 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;
  scroll-margin-top: 112px;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Section content reveal animations */
.snap-content {
  opacity: 1;
  transform: translateY(0);
}

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

/* Staggered delays for child elements */
.snap-content.delay-1 { }
.snap-content.delay-2 { }
.snap-content.delay-3 { }
.snap-content.delay-4 { }
.snap-content.delay-5 { }
.snap-content.delay-6 { }

/* Scale-in variant for cards */
.snap-content.scale-in {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.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;
}

/* Only lock the page scroll on pages that use the fixed .scroll-container
   (the About page's custom scroller). Everywhere else the page scrolls normally. */
html:has(.scroll-container) {
  overflow: hidden;
  height: 100%;
}

html:has(.scroll-container) 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;
}