/* Hero / 3D canvas / contextual blocks */
.hero-section{
  margin-top: 100px;
  /* inline SVG background kept as data URI */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='100%' preserveAspectRatio='none' viewBox='0 0 1440 100%'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1018%26quot%3b)' fill='none'%3e%3cpath d='M1409 980L1408 680' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M794 91L793 448' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M577 615L576 1351' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M822 1000L821 1279' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1058 171L1057 -354' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M415 706L414 1510' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M420 622L419 -73' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1391 556L1390 840' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M977 970L976 580' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M631 1011L630 423' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1046 492L1045 95' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M347 977L346 650' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1030 412L1029 941' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M964 902L963 592' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M281 999L280 1804' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1426 568L1425 1224' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M399 299L398 593' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1332 52L1331 -648' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M512 111L511 481' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M986 543L985 1124' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M373 347L372 -173' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M669 385L668 726' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1162 831L1161 1168' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M328 894L327 1624' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1129 250L1128 -367' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M733 212L732 625' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M838 790L837 1565' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M873 768L872 78' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M195 945L194 1519' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M148 538L147 1238' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1084 393L1083 887' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M571 218L570 -294' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M1005 553L1004 193' stroke-width='10' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3cpath d='M1240 18L1239 593' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M883 472L882 1032' stroke-width='6' stroke='url(%26quot%3b%23SvgjsLinearGradient1019%26quot%3b)' stroke-linecap='round' class='Down'%3e%3c/path%3e%3cpath d='M103 752L102 -21' stroke-width='8' stroke='url(%26quot%3b%23SvgjsLinearGradient1020%26quot%3b)' stroke-linecap='round' class='Up'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1018'%3e%3crect width='1440' height='100%' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='0%25' y1='0%25' x2='0%25' y2='100%25' id='SvgjsLinearGradient1019'%3e%3cstop stop-color='rgba(142%2c 125%2c 28%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(142%2c 125%2c 28%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='0%25' y1='100%25' x2='0%25' y2='0%25' id='SvgjsLinearGradient1020'%3e%3cstop stop-color='rgba(142%2c 125%2c 28%2c 0)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(142%2c 125%2c 28%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
}

#hero-text{
  margin-top: 100px;
  padding-left: 12rem;
}

#three-canvas{
  position: fixed;
  top: 12vh;
  transform: translateX(-62%);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.5s;
  width: 100%;
}
#three-canvas > canvas{
  width: 100% !important;
  height: auto !important;
}

.context-block{
  position: fixed;
  min-width: 340px;
  max-width: 420px;
  background: rgba(33,33,33,0.75);
  color: #ffffff;
  padding: 18px 28px;
  border-radius: 18px;
  border: 2px solid var(--brand-gold);
  /* box-shadow: 0 4px 24px rgba(255, 215, 0, 0.5); */
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, top 0.2s, left 0.2s;
}
.left-block{ left: 200px; right: auto; text-align: left; }
.right-block{ right: 200px; left: auto; text-align: left; }

.context-block.visible{
  opacity: 1;
  pointer-events: auto;
}

.spacer{ height: 300vh; }
.section-fade{
  opacity: 0;
  transition: opacity 0.7s;
  pointer-events: none;
}
.section-visible{
  opacity: 1;
  pointer-events: auto;
}

/* Mobile */
@media (max-width: 700px){
  h1{ line-height: 1.1 !important; }

  .mt-mob{ margin-top: 100px; }
  .ps-feature-mob{ padding-left: 0.5rem !important; }
  .pe-feature-mob{ padding-right: 0.5rem !important; }

  .hero-section{
    background-image: unset;
    margin-top: 60px;
  }

  #img-feature-1{ width: 400px; }

  .left-block, .right-block{
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
  }

  #hero-text{
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .three-canvas-container{ height: 100vh; }

  #three-canvas{
    /* width: 500px; */
    transform: translateX(-100%);
    height: 100vh;
    top: 0;
  }
}