/* Homepage dashboard image-area correction only. Existing header, colors, typography, buttons and lower sections are unchanged. */

/* Keep the hero copy comfortably below the fixed Header 04, matching the live task-management hero rhythm. */
.sk-hero-4-area.sk-hero-1-area {
  padding-top: 215px;
  padding-bottom: 110px;
}

.sk-hero-4-area .sk-hero-4-content {
  margin-bottom: 200px;
}

.ow-hero-dashboard-wrap {
  position: relative;
  z-index: 3;
  width: min(1129px, calc(100% - 30px));
  margin: 0 auto;
}

/* Native Saasking Home 1 dashboard frame: background artwork, padding, radius and shadow. */
.ow-hero-dashboard-stage.sk-hero-1-db {
  width: 100%;
  display: inline-block;
  padding-left: 95px;
  padding-top: 78px;
  padding-right: 44px;
  padding-bottom: 42px;
  border-radius: 32px;
  box-shadow: 0 0 3px 6px rgba(44, 43, 58, 0.4);
  background-color: #0c0b21;
  background-image: url('../images/hero-dashboard-panels/dashboard-shell.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow: visible;
}

/* Restore the theme's exact two-column dashboard grid instead of absolute-positioning panels. */
.ow-hero-dashboard-stage .sk-hero-1-db-img {
  max-width: 990px;
  display: grid;
  grid-template-columns: 2.4fr 1fr;
  gap: 20px;
  margin-inline: auto;
  align-items: start;
}

.ow-hero-dashboard-stage .sk-hero-1-db-img .left,
.ow-hero-dashboard-stage .sk-hero-1-db-img .row-2,
.ow-hero-dashboard-stage .sk-hero-1-db-img .row-3 {
  display: grid;
  gap: 20px;
  align-items: start;
}

.ow-hero-dashboard-stage .sk-hero-1-db-img .row-1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.ow-hero-dashboard-stage .sk-hero-1-db-img-single-border {
  overflow: hidden;
  border: 1px solid #1e233a;
  border-radius: 12px;
  background: #1b2038;
}

.ow-hero-dashboard-stage .sk-hero-1-db-img-single {
  will-change: transform;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.ow-hero-dashboard-stage .sk-hero-1-db-img-single img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 11px;
}

.ow-hero-dashboard-wrap .sk-hero-1-bottom-glow-2 {
  bottom: -52%;
  opacity: 1;
}

.ow-hero-dashboard-wrap .sk-hero-1-bottom-glow-2 img {
  width: 100%;
  height: auto;
}

@media (max-width: 1399px) {
  .sk-hero-4-area.sk-hero-1-area { padding-top: 195px; }
  .ow-hero-dashboard-wrap { width: min(1040px, calc(100% - 30px)); }
  .ow-hero-dashboard-stage.sk-hero-1-db { padding-left: 82px; padding-top: 68px; padding-right: 38px; padding-bottom: 38px; }
}

@media (max-width: 1199px) {
  .sk-hero-4-area.sk-hero-1-area { padding-top: 180px; }
  .sk-hero-4-area .sk-hero-4-content { margin-bottom: 120px; }
  .ow-hero-dashboard-wrap { width: min(940px, calc(100% - 30px)); }
  .ow-hero-dashboard-stage.sk-hero-1-db { padding: 58px 34px 34px 72px; border-radius: 26px; }
  .ow-hero-dashboard-stage .sk-hero-1-db-img,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .left,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-1,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-2,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-3 { gap: 16px; }
}

@media (max-width: 991px) {
  .sk-hero-4-area.sk-hero-1-area { padding-top: 165px; }
  .sk-hero-4-area .sk-hero-4-content { margin-bottom: 82px; }
  .ow-hero-dashboard-wrap { width: calc(100% - 28px); }
  .ow-hero-dashboard-stage.sk-hero-1-db { padding: 7.2% 4% 4% 8%; border-radius: 21px; }
  .ow-hero-dashboard-stage .sk-hero-1-db-img,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .left,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-1,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-2,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-3 { gap: 12px; }
  .ow-hero-dashboard-stage .sk-hero-1-db-img-single-border { border-radius: 9px; }
  .ow-hero-dashboard-stage .sk-hero-1-db-img-single img { border-radius: 8px; }
}

@media (max-width: 767px) {
  .sk-hero-4-area.sk-hero-1-area { padding-top: 145px; }
  .sk-hero-4-area .sk-hero-4-content { margin-bottom: 58px; }
  .ow-hero-dashboard-wrap { width: calc(100% - 20px); }
  .ow-hero-dashboard-stage.sk-hero-1-db { padding: 7% 3.8% 3.8% 8%; border-radius: 15px; }
  .ow-hero-dashboard-stage .sk-hero-1-db-img,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .left,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-1,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-2,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-3 { gap: 7px; }
  .ow-hero-dashboard-stage .sk-hero-1-db-img-single-border { border-radius: 6px; }
  .ow-hero-dashboard-stage .sk-hero-1-db-img-single img { border-radius: 5px; }
}

@media (max-width: 480px) {
  .sk-hero-4-area.sk-hero-1-area { padding-top: 132px; }
  .sk-hero-4-area .sk-hero-4-content { margin-bottom: 42px; }
  .ow-hero-dashboard-wrap { width: calc(100% - 12px); }
  .ow-hero-dashboard-stage.sk-hero-1-db { border-radius: 11px; }
  .ow-hero-dashboard-stage .sk-hero-1-db-img,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .left,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-1,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-2,
  .ow-hero-dashboard-stage .sk-hero-1-db-img .row-3 { gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ow-hero-dashboard-stage .sk-hero-1-db-img-single {
    transform: none !important;
    opacity: 1 !important;
  }
}