/*
 * E WORLD responsive override layer.
 * Loaded after main.css so it safely corrects layout conflicts without changing section logic.
 * Version: 1.1.5
 * Focus: stable desktop + mobile Home hero banner based on the approved HTML prototype.
 */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   HOME HERO — FINAL STABLE DESKTOP LAYOUT
   ------------------------------------------------------------ */
@media (min-width: 1121px) {
  .hero {
    min-height: auto !important;
    padding-top: 142px !important;
    padding-bottom: 78px !important;
    overflow: hidden !important;
  }

  .hero .container.hero-layout,
  .hero .hero-layout {
    width: min(var(--container), calc(100% - 40px)) !important;
    max-width: var(--container) !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr) !important;
    gap: clamp(32px, 4vw, 54px) !important;
    align-items: center !important;
  }

  .hero-copy {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 650px !important;
    min-width: 0;
  }

  .hero-badge {
    max-width: max-content !important;
    margin-bottom: 22px;
    box-shadow: 0 14px 36px rgba(17, 17, 17, .06);
  }

  .hero h1 {
    max-width: 650px !important;
    margin-bottom: 22px;
    font-size: clamp(3rem, 5.05vw, 5.35rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.058em;
  }

  .hero .lead {
    max-width: 620px !important;
    margin-bottom: 30px;
    color: rgba(17, 17, 17, .68);
  }

  .hero-actions {
    margin-bottom: 26px;
  }

  .trust-row {
    max-width: 640px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .hero-visual {
    position: relative !important;
    z-index: 2;
    width: 100% !important;
    max-width: 540px !important;
    min-height: 540px !important;
    justify-self: end !important;
    overflow: visible !important;
    perspective: 1200px;
  }

  .visual-frame {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    width: min(100%, 505px) !important;
    max-width: 505px !important;
    min-height: 515px !important;
    margin-left: auto !important;
    padding: 16px !important;
    border-radius: 30px !important;
    transform: rotateX(3deg) rotateY(-5deg) !important;
    transform-style: preserve-3d;
  }

  .visual-frame:hover {
    transform: rotateX(1deg) rotateY(-2deg) translateY(-6px) !important;
  }

  .dash-card.primary,
  .dash-card.health {
    min-height: 168px !important;
  }

  .dash-card.full {
    min-height: 128px !important;
  }

  .bar-chart {
    height: 68px !important;
  }

  .workflow-mini span {
    min-height: 42px !important;
  }

  .float-card.one {
    top: 72px !important;
    left: -8px !important;
  }

  .float-card.two {
    right: 2px !important;
    bottom: 105px !important;
  }
}

/* Laptop / smaller desktop: keep dashboard fully inside viewport. */
@media (min-width: 1121px) and (max-width: 1280px) {
  .hero .container.hero-layout,
  .hero .hero-layout {
    width: min(100% - 36px, var(--container)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr) !important;
    gap: 30px !important;
  }

  .hero-copy {
    max-width: 610px !important;
  }

  .hero h1 {
    max-width: 610px !important;
    font-size: clamp(2.9rem, 4.7vw, 4.75rem) !important;
  }

  .hero .lead {
    max-width: 585px !important;
  }

  .hero-visual {
    max-width: 482px !important;
    min-height: 505px !important;
  }

  .visual-frame {
    width: min(100%, 462px) !important;
    max-width: 462px !important;
    min-height: 488px !important;
    padding: 14px !important;
    transform: rotateX(2deg) rotateY(-2deg) !important;
  }

  .dash-card.primary,
  .dash-card.health {
    min-height: 150px !important;
  }

  .dash-card.full {
    min-height: 116px !important;
  }

  .bar-chart {
    height: 58px !important;
  }

  .float-card.one {
    left: -4px !important;
  }

  .float-card.two {
    right: -2px !important;
  }
}

/* ------------------------------------------------------------
   TABLET — SINGLE COLUMN HERO
   ------------------------------------------------------------ */
@media (max-width: 1120px) {
  .hero {
    min-height: auto !important;
    padding-top: 132px !important;
    padding-bottom: 62px !important;
    overflow: hidden !important;
  }

  .hero .container.hero-layout,
  .hero .hero-layout {
    width: min(100% - 32px, var(--container)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px !important;
    align-items: start !important;
  }

  .hero-copy {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 760px !important;
    margin-inline: auto;
    text-align: center;
  }

  .hero-badge {
    margin-inline: auto;
  }

  .hero h1,
  .hero .lead {
    max-width: 760px !important;
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .trust-row {
    max-width: 620px !important;
    margin-inline: auto;
  }

  .trust-item {
    justify-content: center;
    text-align: center;
  }

  .hero-visual {
    position: relative !important;
    z-index: 2;
    width: 100% !important;
    max-width: 590px !important;
    min-height: auto !important;
    margin: 4px auto 0 !important;
    overflow: visible !important;
    perspective: none !important;
  }

  .visual-frame {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin-inline: auto !important;
    transform: none !important;
  }

  .visual-frame:hover {
    transform: translateY(-4px) !important;
  }
}

@media (max-width: 900px) {
  .site-header {
    top: 12px;
  }

  .nav-wrap {
    width: min(100% - 28px, var(--container));
    border-radius: 26px;
  }

  .hero {
    padding-top: 118px !important;
    padding-bottom: 58px !important;
  }

  .hero .container.hero-layout,
  .hero .hero-layout {
    gap: 30px !important;
  }

  .hero h1 {
    max-width: 680px !important;
    font-size: clamp(2.45rem, 8vw, 4.1rem) !important;
    line-height: 1.04 !important;
  }

  .hero .lead {
    max-width: 620px !important;
  }

  .trust-row {
    max-width: 620px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .hero-visual {
    max-width: 590px !important;
  }

  .dash-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   MOBILE — NO OVERLAP, COMPACT DASHBOARD
   ------------------------------------------------------------ */
@media (max-width: 680px) {
  .container,
  .nav-wrap {
    width: min(100% - 24px, var(--container));
  }

  .site-header {
    top: 8px;
  }

  .nav-wrap {
    min-height: 66px;
    padding: 9px 9px 9px 12px;
    border-radius: 24px;
  }

  .brand--logo {
    max-width: 168px;
  }

  .brand-logo-img {
    width: 168px;
    max-height: 48px;
    object-fit: contain;
  }

  .mobile-toggle {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
  }

  .nav-menu {
    width: min(88vw, 350px) !important;
    padding-top: 92px !important;
  }

  .hero {
    min-height: auto !important;
    padding-top: 102px !important;
    padding-bottom: 46px !important;
    overflow: hidden !important;
  }

  .hero .container.hero-layout,
  .hero .hero-layout {
    width: min(100% - 24px, var(--container)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  .hero-copy {
    width: 100%;
    max-width: 100% !important;
    text-align: center;
  }

  .hero-badge {
    width: 100%;
    max-width: 100% !important;
    margin: 0 auto 16px;
    padding: 8px;
    align-items: center !important;
    text-align: center;
    border-radius: 22px;
  }

  .hero-badge span {
    width: 100%;
    justify-content: center;
  }

  .hero h1 {
    max-width: 100% !important;
    margin-bottom: 16px;
    font-size: clamp(2.05rem, 10.5vw, 2.72rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.055em;
    word-break: normal;
    overflow-wrap: normal;
  }

  .hero .lead {
    max-width: 100% !important;
    margin-bottom: 22px;
    font-size: .94rem;
    line-height: 1.62;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 18px;
  }

  .hero-actions .btn {
    width: 100%;
    min-height: 48px;
    padding-inline: 18px;
  }

  .trust-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px;
    max-width: 100% !important;
  }

  .trust-item {
    min-width: 0;
    min-height: 50px;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 14px;
    font-size: .76rem;
  }

  .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin-top: 10px !important;
  }

  .visual-frame {
    width: 100% !important;
    min-height: auto !important;
    padding: 12px !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 54px rgba(10, 103, 112, .12) !important;
  }

  .browser-bar {
    padding: 6px 6px 12px;
  }

  .dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px;
  }

  .dash-card,
  .dash-card.primary,
  .dash-card.health,
  .dash-card.half,
  .dash-card.full {
    grid-column: auto !important;
    min-height: auto !important;
    padding: 14px;
    border-radius: 18px;
  }

  .dash-card.health {
    display: none !important;
  }

  .dash-label {
    font-size: .64rem;
  }

  .dash-value {
    font-size: 1.44rem !important;
    line-height: 1.08;
  }

  .dash-card.full .dash-value {
    font-size: 1.08rem !important;
  }

  .dash-note {
    font-size: .78rem;
  }

  .bar-chart {
    height: 48px !important;
    gap: 6px;
    margin-top: 12px;
  }

  .market-tags {
    gap: 7px;
  }

  .market-tags span {
    font-size: .65rem;
    padding: 6px 9px;
  }

  .workflow-mini {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px;
  }

  .workflow-mini span {
    min-height: 38px !important;
    font-size: .60rem;
    padding: 7px;
  }

  .float-card,
  .scroll-indicator {
    display: none !important;
  }

  .section,
  .section.compact,
  .page-hero {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .page-hero-card {
    padding: 26px 18px;
    border-radius: 28px;
  }

  .page-hero-card h1 {
    font-size: clamp(2.05rem, 10.5vw, 2.9rem) !important;
  }
}

/* Very small phones. */
@media (max-width: 380px) {
  .brand--logo {
    max-width: 146px;
  }

  .brand-logo-img {
    width: 146px;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 10vw, 2.35rem) !important;
  }

  .hero .lead {
    font-size: .9rem;
  }
}


/* ------------------------------------------------------------
   HERO DESKTOP HARD FIX V1.1.6
   Goal: keep the Home hero dashboard fully inside the viewport on
   desktop/laptop screens while preserving the approved mobile layout.
   This block intentionally loads at the end and overrides older hero rules.
   ------------------------------------------------------------ */
@media (min-width: 981px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  html body .hero {
    min-height: auto !important;
    padding-top: clamp(132px, 10vw, 154px) !important;
    padding-bottom: 74px !important;
    overflow: hidden !important;
  }

  html body .hero > .container.hero-layout,
  html body .hero .container.hero-layout,
  html body .hero .hero-layout {
    width: min(100% - 40px, var(--container)) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 58%) minmax(0, 42%) !important;
    gap: clamp(20px, 2.8vw, 42px) !important;
    align-items: center !important;
    overflow: visible !important;
  }

  html body .hero-copy {
    position: relative !important;
    z-index: 4 !important;
    width: 100% !important;
    max-width: 640px !important;
    min-width: 0 !important;
  }

  html body .hero-badge {
    width: fit-content !important;
    max-width: min(100%, 620px) !important;
  }

  html body .hero h1 {
    max-width: 640px !important;
    font-size: clamp(3.05rem, 5.1vw, 5.35rem) !important;
    line-height: 1.02 !important;
    margin-bottom: 22px !important;
  }

  html body .hero .lead {
    max-width: 620px !important;
    margin-bottom: 30px !important;
  }

  html body .hero-actions {
    margin-bottom: 26px !important;
  }

  html body .trust-row {
    width: 100% !important;
    max-width: 640px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body .hero-visual {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 430px !important;
    min-width: 0 !important;
    min-height: 478px !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
    overflow: visible !important;
    perspective: none !important;
  }

  html body .hero-visual .visual-frame {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 420px !important;
    min-height: 470px !important;
    margin: 0 0 0 auto !important;
    padding: 14px !important;
    border-radius: 28px !important;
    transform: none !important;
    transform-style: flat !important;
    box-shadow: 0 28px 82px rgba(10, 103, 112, .15), inset 0 1px 0 rgba(255,255,255,.9) !important;
  }

  html body .hero-visual .visual-frame:hover {
    transform: translateY(-4px) !important;
  }

  html body .dash-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }

  html body .dash-card {
    min-height: 104px !important;
    padding: 13px !important;
    border-radius: 19px !important;
  }

  html body .dash-card.primary,
  html body .dash-card.health {
    min-height: 148px !important;
  }

  html body .dash-card.full {
    min-height: 112px !important;
  }

  html body .dash-value {
    font-size: 1.58rem !important;
  }

  html body .dash-card.full .dash-value {
    font-size: 1.22rem !important;
    line-height: 1.16 !important;
  }

  html body .dash-note {
    font-size: .76rem !important;
    line-height: 1.42 !important;
  }

  html body .bar-chart {
    height: 54px !important;
    margin-top: 12px !important;
  }

  html body .workflow-mini {
    gap: 7px !important;
  }

  html body .workflow-mini span {
    min-height: 36px !important;
    font-size: .58rem !important;
    padding: 6px !important;
  }

  html body .health-ring {
    width: 78px !important;
    height: 78px !important;
    margin-top: 10px !important;
  }

  html body .health-ring::before {
    width: 56px !important;
    height: 56px !important;
    font-size: .86rem !important;
  }

  html body .float-card {
    max-width: 190px !important;
    padding: 11px 12px !important;
    border-radius: 16px !important;
    animation: none !important;
  }

  html body .float-card.one {
    top: 34px !important;
    left: -14px !important;
    right: auto !important;
  }

  html body .float-card.two {
    right: -4px !important;
    bottom: 84px !important;
    left: auto !important;
  }

  html body .scroll-indicator {
    bottom: 14px !important;
  }
}

/* Laptop fix: remove floating cards and reduce dashboard so nothing can clip. */
@media (min-width: 981px) and (max-width: 1280px) {
  html body .hero > .container.hero-layout,
  html body .hero .container.hero-layout,
  html body .hero .hero-layout {
    width: min(100% - 36px, var(--container)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 340px) !important;
    gap: 22px !important;
  }

  html body .hero-copy {
    max-width: 600px !important;
  }

  html body .hero h1 {
    max-width: 600px !important;
    font-size: clamp(2.8rem, 4.8vw, 4.55rem) !important;
  }

  html body .hero .lead {
    max-width: 570px !important;
  }

  html body .hero-badge {
    max-width: 570px !important;
  }

  html body .trust-row {
    max-width: 580px !important;
  }

  html body .hero-visual {
    max-width: 340px !important;
    min-height: 420px !important;
  }

  html body .hero-visual .visual-frame {
    max-width: 330px !important;
    min-height: 410px !important;
    padding: 12px !important;
    border-radius: 24px !important;
  }

  html body .browser-bar {
    padding: 6px 6px 12px !important;
  }

  html body .dash-grid {
    gap: 8px !important;
  }

  html body .dash-card {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  html body .dash-card.primary,
  html body .dash-card.health {
    min-height: 130px !important;
  }

  html body .dash-card.full {
    min-height: 96px !important;
  }

  html body .dash-label {
    font-size: .58rem !important;
  }

  html body .dash-value {
    font-size: 1.28rem !important;
  }

  html body .dash-card.full .dash-value {
    font-size: .98rem !important;
  }

  html body .dash-note {
    font-size: .66rem !important;
  }

  html body .bar-chart {
    height: 42px !important;
  }

  html body .market-tags {
    gap: 5px !important;
  }

  html body .market-tags span {
    font-size: .56rem !important;
    padding: 5px 7px !important;
  }

  html body .workflow-mini span {
    min-height: 30px !important;
    font-size: .50rem !important;
  }

  html body .float-card {
    display: none !important;
  }
}

/* Narrow desktop: use a single, premium hero column and hide dashboard safely. */
@media (min-width: 901px) and (max-width: 1100px) {
  html body .hero > .container.hero-layout,
  html body .hero .container.hero-layout,
  html body .hero .hero-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 860px !important;
    text-align: center !important;
  }

  html body .hero-copy {
    max-width: 760px !important;
    margin-inline: auto !important;
  }

  html body .hero-badge,
  html body .hero h1,
  html body .hero .lead,
  html body .trust-row {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body .hero-actions {
    justify-content: center !important;
  }

  html body .hero-visual {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   Header Professional Size Fix V1.1.8
   Compact desktop header, controlled logo height, and balanced spacing.
   ------------------------------------------------------------ */
.site-header {
  top: 14px;
}

.nav-wrap {
  height: 84px !important;
  min-height: 84px !important;
  padding: 8px 18px 8px 22px !important;
  gap: 22px !important;
  border-radius: 999px !important;
  align-items: center !important;
}

.brand,
.brand--logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  max-width: 166px !important;
  min-width: 0 !important;
}

.brand img,
.brand-logo-img,
.custom-logo {
  width: 166px !important;
  height: auto !important;
  max-width: 166px !important;
  max-height: 68px !important;
  object-fit: contain !important;
}

.nav-menu {
  gap: 8px !important;
  flex: 1 1 auto;
  justify-content: center;
}

.nav-menu a {
  min-height: 38px !important;
  padding: 0 10px !important;
  font-size: .82rem !important;
  line-height: 1 !important;
}

.nav-actions {
  flex: 0 0 auto;
}

.nav-actions .btn {
  min-height: 48px !important;
  padding: 0 22px !important;
  font-size: .86rem !important;
}

@media (max-width: 1280px) {
  .nav-wrap {
    width: min(100% - 40px, var(--container)) !important;
    gap: 14px !important;
  }

  .brand,
  .brand--logo {
    max-width: 154px !important;
  }

  .brand img,
  .brand-logo-img,
  .custom-logo {
    width: 154px !important;
    max-width: 154px !important;
    max-height: 64px !important;
  }

  .nav-menu {
    gap: 4px !important;
  }

  .nav-menu a {
    padding: 0 8px !important;
    font-size: .78rem !important;
  }

  .nav-actions .btn {
    min-height: 46px !important;
    padding-inline: 18px !important;
  }
}

@media (max-width: 980px) {
  .nav-wrap {
    height: 76px !important;
    min-height: 76px !important;
    padding: 8px 12px 8px 14px !important;
    border-radius: 28px !important;
  }

  .brand,
  .brand--logo {
    max-width: 148px !important;
  }

  .brand img,
  .brand-logo-img,
  .custom-logo {
    width: 148px !important;
    max-width: 148px !important;
    max-height: 58px !important;
  }
}

@media (max-width: 680px) {
  .site-header {
    top: 8px !important;
  }

  .nav-wrap {
    height: 66px !important;
    min-height: 66px !important;
    padding: 8px 10px 8px 12px !important;
    border-radius: 23px !important;
  }

  .brand,
  .brand--logo {
    max-width: 132px !important;
  }

  .brand img,
  .brand-logo-img,
  .custom-logo {
    width: 132px !important;
    max-width: 132px !important;
    max-height: 48px !important;
  }

  .mobile-toggle {
    width: 42px !important;
    height: 42px !important;
  }
}

@media (max-width: 380px) {
  .brand,
  .brand--logo {
    max-width: 120px !important;
  }

  .brand img,
  .brand-logo-img,
  .custom-logo {
    width: 120px !important;
    max-width: 120px !important;
  }
}