/* KODE Markets v1.3.3 — High-resolution product visual refinement.
   Presentation layer only: no route, form, API, database, controller or model changes. */

.kode-v130 .hero-v133-product{
  isolation:isolate;
  min-height:470px;
  padding:0;
}
.kode-v130 .hero-v133-product:before{
  width:92%;
  height:56%;
  inset-inline-start:6%;
  bottom:2%;
  background:radial-gradient(ellipse,rgba(215,180,92,.19),rgba(7,17,31,.08) 50%,transparent 74%);
  filter:blur(28px);
}
.kode-v130 .hero-v133-picture{
  width:min(100%,660px)!important;
  max-width:660px;
  margin-inline:auto;
  transform:translateY(8px);
}
.kode-v130 .hero-v133-picture img{
  width:100%;
  height:auto;
  object-fit:contain;
  image-rendering:auto;
  backface-visibility:hidden;
  filter:drop-shadow(0 34px 48px rgba(0,0,0,.46)) saturate(.92) contrast(1.04);
}
.kode-v130 .hero-v133-product:after{
  content:"";
  position:absolute;
  z-index:1;
  inset:9% 2% 8% 8%;
  border-radius:50%;
  background:radial-gradient(circle at 58% 48%,rgba(215,180,92,.09),transparent 60%);
  pointer-events:none;
}
.kode-v130 .hero-v133-product .hero-v132-note{z-index:4}

/* Mobile visual is intentionally large and crisp. No browser upscaling beyond source resolution. */
.kode-v130 .platform-v133-mobile{
  min-height:500px;
  padding:10px 0;
}
.kode-v130 .platform-v133-mobile:before{
  width:88%;
  height:48%;
  bottom:2%;
  background:radial-gradient(ellipse,rgba(215,180,92,.15),rgba(8,20,37,.04) 54%,transparent 74%);
}
.kode-v130 .platform-v133-mobile picture{
  width:min(100%,620px)!important;
  max-width:620px;
}
.kode-v130 .platform-v133-mobile img{
  width:100%;
  height:auto;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 28px 44px rgba(0,0,0,.43)) saturate(.84) contrast(1.05);
}

/* Restrain the particle texture so the product visual is the focal point. */
.kode-v130 .hero--v132:before{opacity:.20}
.kode-v130 .hero--v132{background:linear-gradient(135deg,#030811 0%,#06101d 57%,#091629 100%)}
.kode-v130 .hero-v132-surface{background:linear-gradient(90deg,rgba(3,8,17,.99) 0%,rgba(3,8,17,.95) 34%,rgba(3,8,17,.57) 57%,rgba(3,8,17,.04) 86%,rgba(3,8,17,.16) 100%)}

/* Slightly stronger hierarchy on laptop/desktop without enlarging the whole UI. */
@media(min-width:981px){
  .kode-v130 .hero-v132-grid{grid-template-columns:minmax(0,.91fr) minmax(540px,1.09fr);gap:18px;min-height:610px}
  .kode-v130 .hero-v132-copy h1{font-size:clamp(3.35rem,4.45vw,4.35rem);max-width:620px}
  .kode-v130 .platform-v132-grid{grid-template-columns:minmax(330px,.84fr) minmax(500px,1.16fr)}
}
@media(max-width:1180px) and (min-width:981px){
  .kode-v130 .hero-v133-picture{width:min(100%,600px)!important}
  .kode-v130 .platform-v133-mobile picture{width:min(100%,550px)!important}
}
@media(max-width:980px){
  .kode-v130 .hero-v133-product{min-height:400px}
  .kode-v130 .hero-v133-picture{width:min(88vw,650px)!important;transform:none}
  .kode-v130 .platform-v133-mobile{min-height:420px}
  .kode-v130 .platform-v133-mobile picture{width:min(84vw,590px)!important}
}
@media(max-width:720px){
  .kode-v130 .hero-v133-product{min-height:315px;padding-top:10px}
  .kode-v130 .hero-v133-picture{width:min(100%,520px)!important;margin-inline:auto!important}
  .kode-v130 .platform-v133-mobile{min-height:340px}
  .kode-v130 .platform-v133-mobile picture{width:min(95%,520px)!important;margin-inline:auto!important}
}
@media(max-width:430px){
  .kode-v130 .hero-v133-product{min-height:275px}
  .kode-v130 .platform-v133-mobile{min-height:300px}
}
@media(prefers-reduced-motion:reduce){
  .kode-v130 .hero-v133-picture{transform:none}
}