/* ============================================================
   Adsrek Pay — premium hero v4
   Rebuild of the first screen based on the approved visual.
   No financial logic is changed.
   ============================================================ */

/* ---------- Main hero frame ---------- */
.apx-hero{
  isolation:isolate;
  position:relative!important;
  width:min(1380px,calc(100% - 40px))!important;
  min-height:650px!important;
  margin:20px auto 58px!important;
  padding:38px 46px!important;
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr)!important;
  gap:58px!important;
  align-items:center!important;
  overflow:hidden!important;
  border:1px solid rgba(63,132,196,.32)!important;
  border-radius:34px!important;
  background:
    radial-gradient(circle at 82% 19%,rgba(20,115,228,.13),transparent 29%),
    radial-gradient(circle at 8% 76%,rgba(21,128,228,.085),transparent 31%),
    linear-gradient(135deg,#071523 0%,#071827 48%,#071522 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 24px 75px rgba(0,0,0,.18)!important;
}

/* soft tech glow / globe impression on the left */
.apx-hero:before{
  content:""!important;
  position:absolute!important;
  z-index:-2!important;
  width:430px!important;
  height:430px!important;
  left:-225px!important;
  bottom:-118px!important;
  border-radius:50%!important;
  background:
    repeating-radial-gradient(circle at center,
      rgba(40,145,255,.17) 0 1px,
      transparent 1px 33px),
    repeating-linear-gradient(90deg,
      transparent 0 39px,
      rgba(42,148,255,.07) 39px 40px),
    repeating-linear-gradient(0deg,
      transparent 0 39px,
      rgba(42,148,255,.055) 39px 40px)!important;
  border:1px solid rgba(45,146,255,.18)!important;
  opacity:.48!important;
  transform:rotate(-13deg)!important;
  filter:drop-shadow(0 0 34px rgba(18,121,255,.16))!important;
}

.apx-hero:after{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 11% 57%,rgba(38,156,255,.26) 0 1px,transparent 2px),
    radial-gradient(circle at 15% 43%,rgba(38,156,255,.23) 0 1px,transparent 2px),
    radial-gradient(circle at 3% 68%,rgba(38,156,255,.18) 0 1px,transparent 2px),
    linear-gradient(90deg,transparent,rgba(37,147,255,.025) 56%,transparent)!important;
}

/* ---------- Left side ---------- */
.apx-hero-copy{
  position:relative!important;
  z-index:3!important;
  max-width:590px!important;
}

.apx-kicker{
  min-height:35px!important;
  padding:0 15px!important;
  border:1px solid rgba(74,154,223,.34)!important;
  background:rgba(9,31,50,.78)!important;
  color:#acd3ef!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.apx-kicker i{
  width:7px!important;
  height:7px!important;
  background:linear-gradient(135deg,#267cff,#2edcff)!important;
  box-shadow:0 0 0 5px rgba(29,132,255,.08),0 0 18px rgba(42,180,255,.38)!important;
}

.apx-hero h1{
  margin-top:27px!important;
  font-size:clamp(64px,5vw,82px)!important;
  line-height:.92!important;
  letter-spacing:-.064em!important;
  text-shadow:0 7px 28px rgba(0,0,0,.16)!important;
}
.apx-hero h1 strong{
  margin-top:12px!important;
  background:linear-gradient(104deg,#4f91e9 2%,#44c0ea 58%,#6fe2e8 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
}

.apx-hero-copy>p{
  max-width:560px!important;
  margin-top:26px!important;
  color:#a9c0d6!important;
  font-size:16px!important;
  line-height:1.65!important;
}

/* buttons */
.apx-actions{
  margin-top:31px!important;
  gap:14px!important;
}
.apx-btn{
  min-height:54px!important;
  padding:0 22px!important;
  border-radius:14px!important;
  border-color:#294760!important;
  background:#0d2033!important;
  color:#edf6ff!important;
  font-size:13px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.apx-btn--primary{
  min-width:205px!important;
  border-color:rgba(52,157,255,.55)!important;
  background:linear-gradient(110deg,#1568f4 0%,#188fff 57%,#27cce9 100%)!important;
  box-shadow:
    0 13px 28px rgba(21,111,241,.25),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.apx-btn:hover{
  transform:translateY(-2px)!important;
  border-color:#3c6484!important;
}

/* trust boxes */
.apx-trust{
  margin-top:31px!important;
  padding-top:0!important;
  border-top:0!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:11px!important;
}
.apx-trust>div{
  min-height:82px!important;
  padding:13px 13px!important;
  align-items:flex-start!important;
  border:1px solid #27435d!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#0d2033,#0a1b2d)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.apx-trust-icon{
  width:31px!important;
  height:31px!important;
  flex:0 0 31px!important;
  border-radius:10px!important;
  border-color:#2c5275!important;
  background:#0c2946!important;
  color:#2b8fff!important;
}
.apx-trust b{
  color:#f0f6fc!important;
  font-size:9.5px!important;
}
.apx-trust small{
  color:#7898b5!important;
  font-size:7.5px!important;
}

/* ---------- Product side ---------- */
.apx-visual{
  position:relative!important;
  z-index:4!important;
  max-width:620px!important;
  width:100%!important;
  margin-left:auto!important;
  padding:14px!important;
  border:1px solid rgba(54,128,191,.34)!important;
  border-radius:29px!important;
  background:
    radial-gradient(circle at 78% 8%,rgba(17,123,255,.14),transparent 30%),
    linear-gradient(145deg,#0b1f33,#091a2a)!important;
  box-shadow:
    0 28px 60px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.022)!important;
}

/* card */
.apx-bank-card.apx-bank-card--real{
  width:calc(100% - 24px)!important;
  height:238px!important;
  margin:0 auto!important;
  padding:23px 25px!important;
  border-radius:24px!important;
  border:1px solid rgba(63,151,230,.43)!important;
  background:
    repeating-linear-gradient(124deg,rgba(255,255,255,.016) 0 1px,transparent 1px 4px),
    radial-gradient(circle at 93% 7%,rgba(26,140,255,.18),transparent 32%),
    linear-gradient(135deg,#123c67 0%,#0d3156 43%,#082445 100%)!important;
  box-shadow:
    0 22px 44px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 0 1px rgba(25,108,198,.08)!important;
}
.apx-bank-card.apx-bank-card--real:before{
  right:33px!important;
  bottom:-25px!important;
  font-size:144px!important;
  color:rgba(61,151,238,.065)!important;
}
.apx-bank-top>span{
  gap:10px!important;
  font-size:16px!important;
}
.apx-bank-top img{
  width:29px!important;
  height:29px!important;
}
.apx-card-tech{
  margin-top:19px!important;
}
.apx-card-chip{
  width:48px!important;
  height:35px!important;
  border-radius:8px!important;
}
.apx-bank-number{
  margin-top:17px!important;
  color:#f0f7ff!important;
  font-size:14px!important;
  letter-spacing:.19em!important;
}
.apx-bank-bottom{
  margin-top:16px!important;
}

/* exchange shell */
.apx-visual-bottom{
  margin-top:14px!important;
}
.apx-exchange{
  padding:15px 16px 14px!important;
  border:1px solid #2b4c68!important;
  border-radius:21px!important;
  background:
    linear-gradient(145deg,#0d2237,#0b1e31)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 14px 30px rgba(0,0,0,.12)!important;
}

.apx-exchange-head{
  min-height:30px!important;
  padding-bottom:11px!important;
  border-bottom:1px solid #27445e!important;
}
.apx-exchange-head b{
  color:#f2f7fc!important;
  font-size:13px!important;
}
.apx-exchange-head span{
  min-height:23px!important;
  padding:0 9px!important;
  border:1px solid rgba(45,151,108,.15)!important;
  border-radius:999px!important;
  background:#0f382e!important;
  color:#69d2ad!important;
  font-size:7px!important;
}

.apx-exchange-row{
  min-height:61px!important;
  padding:9px 11px!important;
  border:1px solid #294a65!important;
  border-radius:14px!important;
  background:#102840!important;
}
.apx-exchange-row--calc{
  margin-top:11px!important;
}
.apx-exchange-row--result{
  margin-top:10px!important;
}
.apx-money{
  width:35px!important;
  height:35px!important;
  border-radius:11px!important;
  font-size:17px!important;
  box-shadow:0 8px 18px rgba(10,76,166,.19)!important;
}
.apx-exchange-field small{
  color:#7191ae!important;
  font-size:7px!important;
}
.apx-amount-wrap{
  margin-top:3px!important;
  min-height:27px!important;
}
.apx-amount-wrap input,
.apx-amount-wrap strong{
  color:#f3f8fd!important;
  font-size:14px!important;
  font-weight:950!important;
}
.apx-amount-wrap b{
  color:#f0f6fd!important;
  font-size:12px!important;
}
.apx-exchange-row em{
  color:#8fa9c1!important;
  font-size:7px!important;
}

.apx-swap--button{
  width:34px!important;
  height:34px!important;
  margin:10px auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  left:0!important;
  top:0!important;
  transform:none!important;
  border:1px solid #315877!important;
  border-radius:10px!important;
  background:#102b45!important;
  color:#62b9ff!important;
  box-shadow:0 7px 17px rgba(0,0,0,.17)!important;
}

.apx-exchange-meta{
  margin-top:11px!important;
  padding-top:10px!important;
  border-top:1px dashed #29465f!important;
}
.apx-exchange-meta span{
  color:#8cabc5!important;
  font-size:8px!important;
}
.apx-exchange-meta span:before{
  background:#4da9ef!important;
}

/* Large action inside calculator */
.apx-exchange>a{
  min-height:40px!important;
  margin-top:12px!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border:1px solid rgba(56,160,255,.42)!important;
  border-radius:11px!important;
  background:linear-gradient(110deg,#1766f4 0%,#1b8fff 58%,#28c8e9 100%)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  text-decoration:none!important;
  box-shadow:
    0 10px 24px rgba(20,104,232,.22),
    inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.apx-exchange>a:hover{
  transform:translateY(-1px)!important;
  filter:brightness(1.04)!important;
}

/* Remove excessive empty gap between hero and next section */
.apx-features{
  padding-top:42px!important;
}

/* ---------- Light theme ----------
   Keep same premium composition, but without a white generic SaaS look.
*/
html[data-theme="light"] .apx-hero{
  border-color:#c9dceb!important;
  background:
    radial-gradient(circle at 83% 18%,rgba(59,142,236,.10),transparent 29%),
    radial-gradient(circle at 8% 76%,rgba(50,157,230,.06),transparent 31%),
    linear-gradient(135deg,#f7fbff 0%,#f2f7fc 50%,#edf5fb 100%)!important;
  box-shadow:0 26px 60px rgba(47,83,118,.08)!important;
}
html[data-theme="light"] .apx-hero:before{
  opacity:.25!important;
}
html[data-theme="light"] .apx-kicker{
  background:rgba(255,255,255,.74)!important;
  color:#3973a7!important;
  border-color:#cddfec!important;
}
html[data-theme="light"] .apx-hero-copy>p{
  color:#617d98!important;
}
html[data-theme="light"] .apx-btn:not(.apx-btn--primary){
  background:#fff!important;
  color:#12355a!important;
  border-color:#d2e0ec!important;
}
html[data-theme="light"] .apx-trust>div{
  background:rgba(255,255,255,.74)!important;
  border-color:#d2e1ed!important;
}
html[data-theme="light"] .apx-trust b{
  color:#163758!important;
}
html[data-theme="light"] .apx-trust small{
  color:#718aa1!important;
}
html[data-theme="light"] .apx-trust-icon{
  background:#eff7ff!important;
  border-color:#d2e5f3!important;
}
html[data-theme="light"] .apx-visual{
  background:
    radial-gradient(circle at 78% 8%,rgba(29,119,230,.10),transparent 30%),
    rgba(239,247,253,.90)!important;
  border-color:#c7dceb!important;
}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .apx-hero{
    grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr)!important;
    gap:34px!important;
    padding:34px!important;
  }
  .apx-hero h1{
    font-size:60px!important;
  }
}

@media(max-width:980px){
  .apx-hero{
    grid-template-columns:1fr!important;
    min-height:0!important;
    padding:38px 32px!important;
  }
  .apx-hero-copy{
    max-width:680px!important;
  }
  .apx-visual{
    max-width:680px!important;
    margin:0 auto!important;
  }
  .apx-hero:before{
    left:-265px!important;
    bottom:auto!important;
    top:155px!important;
  }
}

@media(max-width:640px){
  .apx-hero{
    width:calc(100% - 20px)!important;
    margin-top:10px!important;
    padding:26px 17px!important;
    border-radius:24px!important;
  }
  .apx-hero h1{
    font-size:46px!important;
  }
  .apx-hero-copy>p{
    font-size:14px!important;
  }
  .apx-actions{
    flex-direction:column!important;
  }
  .apx-btn{
    width:100%!important;
  }
  .apx-trust{
    grid-template-columns:1fr!important;
  }
  .apx-trust>div{
    min-height:60px!important;
  }
  .apx-visual{
    padding:8px!important;
    border-radius:22px!important;
  }
  .apx-bank-card.apx-bank-card--real{
    width:100%!important;
    height:215px!important;
    padding:19px!important;
  }
  .apx-bank-card.apx-bank-card--real:before{
    font-size:105px!important;
  }
  .apx-exchange{
    padding:12px!important;
  }
}


/* v5: keep switch centered on small screens too */
@media(max-width:640px){
  .apx-swap--button{
    margin:8px auto!important;
  }
}


/* ============================================================
   v6: align trust cards and exchange rate/meta row
   ============================================================ */

/* 3 small trust blocks under buttons */
.apx-trust{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
}

.apx-trust>div{
  display:grid!important;
  grid-template-columns:31px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:center!important;
  min-height:82px!important;
  height:100%!important;
}

.apx-trust-icon{
  align-self:center!important;
  justify-self:start!important;
}

.apx-trust>div>span:last-child{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-self:center!important;
  min-height:48px!important;
  gap:4px!important;
}

.apx-trust b,
.apx-trust small{
  display:block!important;
  margin:0!important;
  line-height:1.35!important;
}

/* exchange meta line where the rate and result are shown */
.apx-exchange-meta{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px 16px!important;
  align-items:center!important;
}

.apx-exchange-meta span{
  display:flex!important;
  align-items:center!important;
  min-height:16px!important;
  line-height:1.35!important;
}

.apx-exchange-meta span:last-child{
  justify-self:end!important;
  text-align:right!important;
  justify-content:flex-end!important;
}

/* better alignment of the top green rate badge too */
.apx-exchange-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}

@media(max-width:640px){
  .apx-trust{
    grid-template-columns:1fr!important;
  }
  .apx-trust>div{
    min-height:64px!important;
  }
  .apx-exchange-meta{
    grid-template-columns:1fr!important;
  }
  .apx-exchange-meta span:last-child{
    justify-self:start!important;
    justify-content:flex-start!important;
    text-align:left!important;
  }
}


/* ============================================================
   v7: fine alignment for exchange rate row in hero calculator
   ============================================================ */
.apx-exchange-meta{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:18px!important;
  row-gap:8px!important;
}

.apx-exchange-meta span{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:18px!important;
  white-space:nowrap!important;
}

.apx-exchange-meta span:before{
  flex:0 0 6px!important;
  width:6px!important;
  height:6px!important;
}

.apx-exchange-meta span:first-child{
  justify-content:flex-start!important;
}

.apx-exchange-meta span:last-child{
  justify-content:flex-end!important;
  justify-self:end!important;
  text-align:right!important;
}

@media(max-width:640px){
  .apx-exchange-meta{
    grid-template-columns:1fr!important;
  }
  .apx-exchange-meta span,
  .apx-exchange-meta span:last-child{
    justify-content:flex-start!important;
    justify-self:start!important;
    text-align:left!important;
  }
}


/* ============================================================
   v8: exact alignment for top exchange rate badge in hero block
   ============================================================ */
.apx-exchange-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:12px!important;
}

.apx-exchange-head b{
  display:flex!important;
  align-items:center!important;
  min-height:22px!important;
  margin:0!important;
  line-height:1.15!important;
}

.apx-exchange-head span,
#apxRateBadge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:center!important;
  height:22px!important;
  min-height:22px!important;
  margin:0!important;
  padding:0 9px!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-sizing:border-box!important;
}


/* ============================================================
   v11: proper light-theme exchange calculator
   Keep bank card dark, make calculator match the light page.
   ============================================================ */

html[data-theme="light"] .apx-visual{
  background:
    radial-gradient(circle at 78% 8%,rgba(29,119,230,.09),transparent 31%),
    linear-gradient(145deg,#eef6fc,#e6f1f9)!important;
  border-color:#c5d9e9!important;
  box-shadow:
    0 24px 55px rgba(43,76,108,.10),
    inset 0 1px 0 rgba(255,255,255,.72)!important;
}

html[data-theme="light"] .apx-exchange{
  border-color:#c8dbea!important;
  background:
    linear-gradient(145deg,#ffffff 0%,#f4f9fd 100%)!important;
  box-shadow:
    0 16px 34px rgba(39,76,111,.08),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
}

html[data-theme="light"] .apx-exchange-head{
  border-bottom-color:#d8e5ef!important;
}

html[data-theme="light"] .apx-exchange-head b{
  color:#12385c!important;
}

html[data-theme="light"] .apx-exchange-head span,
html[data-theme="light"] #apxRateBadge{
  border-color:#cfe8df!important;
  background:#eaf8f3!important;
  color:#18896f!important;
}

html[data-theme="light"] .apx-exchange-row{
  border-color:#d3e1ec!important;
  background:#f9fcff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important;
}

html[data-theme="light"] .apx-exchange-row:hover{
  border-color:#b9d5e8!important;
}

html[data-theme="light"] .apx-exchange-field small{
  color:#7a92aa!important;
}

html[data-theme="light"] .apx-amount-wrap input,
html[data-theme="light"] .apx-amount-wrap strong{
  color:#13395d!important;
}

html[data-theme="light"] .apx-amount-wrap input{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

html[data-theme="light"] .apx-amount-wrap b{
  color:#173d60!important;
}

html[data-theme="light"] .apx-exchange-row em{
  color:#7891aa!important;
}

html[data-theme="light"] .apx-swap--button{
  border-color:#bfd9eb!important;
  background:#edf7ff!important;
  color:#187be6!important;
  box-shadow:0 7px 16px rgba(37,103,164,.10)!important;
}

html[data-theme="light"] .apx-exchange-meta{
  border-top-color:#d3e2ed!important;
}

html[data-theme="light"] .apx-exchange-meta span{
  color:#617f9b!important;
}

html[data-theme="light"] .apx-exchange-meta span:before{
  background:#2e91e7!important;
}

html[data-theme="light"] .apx-exchange>a{
  border-color:rgba(36,145,230,.38)!important;
  background:linear-gradient(110deg,#1973ef 0%,#2399ed 58%,#30c7e5 100%)!important;
  color:#fff!important;
  box-shadow:
    0 11px 25px rgba(30,119,213,.20),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

/* The outer calculator frame should not look like a dark insert. */
html[data-theme="light"] .apx-visual-bottom{
  filter:none!important;
}

/* Keep the visual hierarchy crisp on the light background. */
html[data-theme="light"] .apx-money--rub{
  box-shadow:0 8px 17px rgba(28,93,190,.15)!important;
}
html[data-theme="light"] .apx-money--usdt{
  box-shadow:0 8px 17px rgba(20,132,145,.13)!important;
}

/* Fine-tune contrast of the light trust cards too. */
html[data-theme="light"] .apx-trust>div{
  background:linear-gradient(145deg,#ffffff,#f6fbff)!important;
  border-color:#cedfeb!important;
  box-shadow:
    0 9px 22px rgba(45,82,116,.055),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
}