/*
  KONECTA CRYPTOS
  PUBLIC OPERATIONS EXPERIENCE V1
*/

:root{
  --kc-blue:#188fff;
  --kc-cyan:#3bdcff;
  --kc-green:#27dda4;
  --kc-violet:#9273ff;
  --kc-pink:#ee68d2;
  --kc-yellow:#ffc24b;
  --kc-orange:#ff9c39;
  --kc-red:#ff6079;
}

/* =========================================================
   STICKY HEADER
========================================================= */

body > header{
  position:sticky !important;
  top:0 !important;
  z-index:9999 !important;

  background:
    linear-gradient(
      180deg,
      rgba(3,7,12,.96),
      rgba(3,7,12,.88)
    ) !important;

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);

  border-bottom:
    1px solid
    rgba(255,255,255,.055);

  transition:
    box-shadow .25s ease,
    background .25s ease;
}

body > header.kc-scrolled{
  box-shadow:
    0 20px 50px
    rgba(0,0,0,.30);

  background:
    rgba(3,7,12,.975) !important;
}

/* =========================================================
   MEGA MENU
========================================================= */

.kc-mega-nav{
  display:flex;
  align-items:center;
  gap:6px;
}

.kc-mega-item{
  position:relative;
}

.kc-mega-trigger{
  min-height:42px;

  display:flex;
  align-items:center;
  gap:6px;

  padding:0 12px;

  border-radius:11px;

  color:#9fb2c5 !important;

  font-size:12px !important;

  cursor:pointer;
}

.kc-mega-trigger:hover,
.kc-mega-item:hover .kc-mega-trigger{
  color:#fff !important;

  background:
    rgba(255,255,255,.035);
}

.kc-mega-chevron{
  font-size:8px;
  opacity:.6;
  transition:.25s;
}

.kc-mega-item:hover .kc-mega-chevron{
  transform:rotate(180deg);
}

.kc-mega-panel{
  width:720px;

  position:absolute;

  top:calc(100% + 12px);
  left:50%;

  transform:
    translateX(-50%)
    translateY(9px);

  padding:13px;

  visibility:hidden;
  opacity:0;

  pointer-events:none;

  border-radius:22px;

  border:
    1px solid
    rgba(255,255,255,.09);

  background:
    linear-gradient(
      145deg,
      rgba(11,25,39,.985),
      rgba(5,12,20,.99)
    );

  box-shadow:
    0 35px 100px
    rgba(0,0,0,.48);

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s;
}

.kc-mega-item:hover .kc-mega-panel,
.kc-mega-item:focus-within .kc-mega-panel{
  visibility:visible;
  opacity:1;

  pointer-events:auto;

  transform:
    translateX(-50%)
    translateY(0);
}

.kc-mega-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:7px;
}

.kc-mega-card{
  min-height:92px;

  display:grid;

  grid-template-columns:
    43px 1fr auto;

  align-items:center;

  gap:11px;

  padding:13px;

  border-radius:15px;

  border:
    1px solid transparent;

  transition:.2s;
}

.kc-mega-card:hover{
  background:
    rgba(255,255,255,.04);

  border-color:
    rgba(71,177,255,.12);

  transform:
    translateY(-2px);
}

.kc-mega-icon{
  width:43px;
  height:43px;

  display:grid;
  place-items:center;

  border-radius:13px;

  font-size:15px;

  background:
    rgba(38,145,255,.10);

  color:#59beff;
}

.kc-mega-card:nth-child(2) .kc-mega-icon{
  color:var(--kc-green);
  background:rgba(39,221,164,.08);
}

.kc-mega-card:nth-child(3) .kc-mega-icon{
  color:var(--kc-violet);
  background:rgba(146,115,255,.09);
}

.kc-mega-card:nth-child(4) .kc-mega-icon{
  color:var(--kc-yellow);
  background:rgba(255,194,75,.08);
}

.kc-mega-card:nth-child(5) .kc-mega-icon{
  color:var(--kc-pink);
  background:rgba(238,104,210,.08);
}

.kc-mega-copy strong{
  display:block;

  color:#eef8ff;

  font-size:11px;
}

.kc-mega-copy span{
  display:block;

  margin-top:4px;

  color:#72889d;

  font-size:8px;
  line-height:1.45;
}

.kc-mega-arrow{
  color:#60798e;
  font-size:12px;
}

.kc-mega-footer{
  margin-top:8px;

  padding:11px 13px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  border-radius:13px;

  background:
    linear-gradient(
      90deg,
      rgba(35,142,255,.08),
      rgba(146,102,255,.06)
    );

  color:#7f97ac;

  font-size:8px;
}

.kc-mega-footer a{
  color:#71c7ff !important;
  font-weight:800;
}

/* =========================================================
   OPERATIONS HOME
========================================================= */

.kc-ops-experience{
  position:relative;

  padding:
    40px 0 140px;
}

.kc-ops-heading{
  max-width:820px;

  margin-bottom:58px;
}

.kc-ops-kicker{
  color:#56beff;

  font-size:10px;
  font-weight:850;

  letter-spacing:1.4px;

  text-transform:uppercase;
}

.kc-ops-heading h2{
  margin-top:14px;

  font-size:
    clamp(43px,4.8vw,69px);

  line-height:1;

  letter-spacing:-3.7px;
}

.kc-ops-heading p{
  max-width:650px;

  margin-top:19px;

  color:#8198ad;

  font-size:14px;
  line-height:1.75;
}

.kc-operation{
  min-height:610px;

  position:relative;
  overflow:hidden;

  margin-top:24px;

  display:grid;

  align-items:center;

  border-radius:31px;

  border:
    1px solid
    rgba(255,255,255,.072);

  background:
    linear-gradient(
      145deg,
      rgba(12,26,41,.94),
      rgba(5,12,20,.97)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.03);

  transition:
    border-color .3s,
    transform .3s;
}

.kc-operation:hover{
  border-color:
    rgba(69,176,255,.15);
}

.kc-operation-buy{
  grid-template-columns:
    .88fr 1.12fr;

  background:
    radial-gradient(
      560px 430px at 77% 50%,
      rgba(39,149,255,.12),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      #0c1a29,
      #050c14
    );
}

.kc-operation-sell{
  grid-template-columns:
    1.14fr .86fr;

  background:
    radial-gradient(
      520px 420px at 20% 50%,
      rgba(39,221,164,.095),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      #071817,
      #050c12
    );
}

.kc-operation-deposit{
  grid-template-columns:
    .83fr 1.17fr;

  background:
    radial-gradient(
      520px 420px at 78% 48%,
      rgba(145,111,255,.12),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      #0d1425,
      #060b15
    );
}

.kc-operation-withdraw{
  grid-template-columns:
    1.12fr .88fr;

  background:
    radial-gradient(
      520px 420px at 18% 45%,
      rgba(255,188,68,.095),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      #18140b,
      #080b10
    );
}

.kc-operation-convert{
  grid-template-columns:
    .88fr 1.12fr;

  background:
    radial-gradient(
      550px 430px at 78% 50%,
      rgba(238,99,210,.105),
      transparent 70%
    ),
    radial-gradient(
      390px 340px at 62% 30%,
      rgba(50,199,255,.07),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      #151022,
      #060b14
    );
}

.kc-op-copy{
  padding:62px;
  position:relative;
  z-index:4;
}

.kc-op-number{
  color:#566e84;

  font-size:9px;
  font-weight:800;

  letter-spacing:1px;
}

.kc-op-copy h3{
  margin-top:23px;

  font-size:
    clamp(37px,4vw,59px);

  line-height:1.01;

  letter-spacing:-3px;
}

.kc-op-copy p{
  max-width:480px;

  margin-top:17px;

  color:#8299ae;

  font-size:13px;
  line-height:1.75;
}

.kc-op-bullets{
  margin-top:25px;

  display:flex;
  flex-wrap:wrap;

  gap:8px;
}

.kc-op-bullet{
  padding:7px 10px;

  border-radius:99px;

  border:
    1px solid
    rgba(255,255,255,.065);

  background:
    rgba(255,255,255,.025);

  color:#8299ad;

  font-size:8px;
}

.kc-op-actions{
  display:flex;
  flex-wrap:wrap;

  gap:9px;

  margin-top:29px;
}

.kc-op-btn{
  min-height:48px;

  padding:0 18px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  border-radius:13px;

  border:
    1px solid
    rgba(255,255,255,.075);

  font-size:11px;
  font-weight:800;

  transition:.22s;
}

.kc-op-btn:hover{
  transform:translateY(-3px);
}

.kc-op-main{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      #289aff,
      #086bd1
    );

  border-color:
    rgba(60,172,255,.4);
}

.kc-operation-sell .kc-op-main{
  background:
    linear-gradient(
      135deg,
      #24c98f,
      #108969
    );
}

.kc-operation-deposit .kc-op-main{
  background:
    linear-gradient(
      135deg,
      #9474ff,
      #6549df
    );
}

.kc-operation-withdraw .kc-op-main{
  color:#181208;

  background:
    linear-gradient(
      135deg,
      #ffd05e,
      #e49b25
    );
}

.kc-operation-convert .kc-op-main{
  background:
    linear-gradient(
      135deg,
      #ed6ed5,
      #8b67ff
    );
}

.kc-op-secondary{
  background:
    rgba(255,255,255,.03);

  color:#b6c9da;
}

.kc-op-visual{
  min-height:610px;

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:38px;
}

.kc-operation-sell .kc-op-visual,
.kc-operation-withdraw .kc-op-visual{
  order:-1;
}

.kc-op-photo{
  width:100%;
  height:485px;

  position:relative;
  overflow:hidden;

  border-radius:24px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:
    #08131e;

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.34);
}

.kc-op-photo img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  opacity:.72;

  filter:
    saturate(.82)
    contrast(1.05);

  transition:
    transform .8s
    cubic-bezier(.2,.7,.2,1),
    opacity .4s;
}

.kc-operation:hover .kc-op-photo img{
  transform:scale(1.035);
  opacity:.82;
}

.kc-op-photo:after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(4,11,18,.82),
      rgba(4,11,18,.10) 55%,
      rgba(4,11,18,.25)
    );

  pointer-events:none;
}

.kc-operation-sell .kc-op-photo:after,
.kc-operation-withdraw .kc-op-photo:after{
  background:
    linear-gradient(
      -90deg,
      rgba(4,11,18,.78),
      rgba(4,11,18,.08) 55%,
      rgba(4,11,18,.20)
    );
}

/* =========================================================
   FUNCTIONAL MINI WIDGETS
========================================================= */

.kc-live-widget{
  width:min(355px,calc(100% - 65px));

  position:absolute;
  z-index:5;

  right:7px;
  bottom:28px;

  padding:16px;

  border-radius:19px;

  border:
    1px solid
    rgba(255,255,255,.095);

  background:
    rgba(6,16,27,.94);

  backdrop-filter:
    blur(20px);

  box-shadow:
    0 25px 70px
    rgba(0,0,0,.38);
}

.kc-operation-sell .kc-live-widget,
.kc-operation-withdraw .kc-live-widget{
  right:auto;
  left:7px;
}

.kc-widget-head{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:13px;
}

.kc-widget-head strong{
  font-size:10px;
}

.kc-live-badge{
  color:#35dda7;

  font-size:7px;
}

.kc-price-big{
  font-size:22px;
  letter-spacing:-1px;
}

.kc-price-change{
  margin-top:3px;

  color:#35dda7;

  font-size:8px;
}

.kc-price-change.negative{
  color:#ff647c;
}

.kc-mini-chart{
  height:70px;

  margin-top:10px;
}

.kc-mini-chart svg{
  width:100%;
  height:100%;
}

.kc-mini-chart path{
  fill:none;

  stroke:#3aafff;
  stroke-width:2.5;

  stroke-linecap:round;

  stroke-dasharray:600;
  stroke-dashoffset:600;

  animation:
    kcDrawMini 2.2s ease forwards;
}

@keyframes kcDrawMini{
  to{
    stroke-dashoffset:0;
  }
}

.kc-sim-row{
  display:grid;

  grid-template-columns:
    1fr auto;

  gap:8px;

  margin-top:12px;
}

.kc-sim-input{
  min-width:0;
  height:44px;

  padding:0 12px;

  border-radius:11px;

  outline:none;

  color:#fff;

  border:
    1px solid
    rgba(255,255,255,.075);

  background:#0c1b2a;
}

.kc-sim-unit{
  min-width:58px;

  display:grid;
  place-items:center;

  border-radius:11px;

  background:#102237;

  color:#7fb9e2;

  font-size:9px;
}

.kc-estimate{
  margin-top:11px;

  display:flex;
  justify-content:space-between;

  color:#71889d;

  font-size:8px;
}

.kc-estimate strong{
  color:#dcecff;
  font-size:9px;
}

.kc-flow-widget{
  width:min(385px,calc(100% - 65px));

  position:absolute;

  right:4px;
  bottom:27px;
  z-index:5;

  padding:17px;

  border-radius:20px;

  background:
    rgba(8,14,28,.94);

  border:
    1px solid
    rgba(154,119,255,.17);

  backdrop-filter:blur(18px);
}

.kc-flow-line{
  position:relative;

  margin-top:17px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:6px;
}

.kc-flow-line:before{
  content:"";

  height:2px;

  position:absolute;

  top:21px;
  left:9%;
  right:9%;

  background:
    linear-gradient(
      90deg,
      #278fff,
      #49decf,
      #9373ff,
      #ef65d2
    );
}

.kc-flow-step{
  position:relative;
  z-index:2;

  text-align:center;

  color:#73899e;

  font-size:7px;
}

.kc-flow-dot{
  width:43px;
  height:43px;

  margin:0 auto 7px;

  display:grid;
  place-items:center;

  border-radius:14px;

  color:#9a82ff;

  background:#111b32;

  border:
    1px solid
    rgba(151,117,255,.18);
}

.kc-withdraw-widget{
  width:min(380px,calc(100% - 65px));

  position:absolute;

  left:4px;
  bottom:27px;
  z-index:5;

  padding:18px;

  border-radius:20px;

  background:
    rgba(22,17,8,.94);

  border:
    1px solid
    rgba(255,193,74,.17);

  backdrop-filter:
    blur(18px);
}

.kc-withdraw-row{
  display:flex;
  align-items:center;
  gap:10px;

  padding:9px 0;

  border-bottom:
    1px solid
    rgba(255,255,255,.05);
}

.kc-withdraw-row:last-child{
  border-bottom:0;
}

.kc-withdraw-num{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border-radius:10px;

  color:#ffc458;

  background:
    rgba(255,194,75,.09);

  font-size:8px;
  font-weight:800;
}

.kc-withdraw-row strong{
  display:block;

  font-size:9px;
}

.kc-withdraw-row small{
  display:block;

  margin-top:2px;

  color:#766e61;

  font-size:7px;
}

.kc-convert-widget{
  width:min(390px,calc(100% - 65px));

  position:absolute;

  right:4px;
  bottom:27px;
  z-index:5;

  padding:18px;

  border-radius:20px;

  background:
    rgba(18,12,31,.95);

  border:
    1px solid
    rgba(238,100,210,.15);

  backdrop-filter:blur(19px);
}

.kc-convert-box{
  padding:12px;

  border-radius:13px;

  background:#151329;

  border:
    1px solid
    rgba(255,255,255,.06);
}

.kc-convert-box + .kc-convert-box{
  margin-top:8px;
}

.kc-convert-label{
  display:flex;
  justify-content:space-between;

  color:#75849c;

  font-size:7px;
}

.kc-convert-value{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-top:8px;
}

.kc-convert-value input{
  width:68%;

  outline:none;
  border:0;

  color:#fff;

  background:transparent;

  font-size:21px;
  font-weight:750;
}

.kc-convert-value strong{
  font-size:9px;
  color:#d58aff;
}

.kc-switch{
  width:34px;
  height:34px;

  margin:-4px auto;

  position:relative;
  z-index:4;

  display:grid;
  place-items:center;

  border-radius:11px;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #e968d1,
      #7665f3
    );

  box-shadow:
    0 7px 25px
    rgba(154,86,231,.25);
}

/* =========================================================
   POPUP / SIDE SIMULATOR
========================================================= */

.kc-sim-overlay{
  position:fixed;
  inset:0;

  z-index:20000;

  visibility:hidden;
  opacity:0;

  background:
    rgba(0,0,0,.58);

  backdrop-filter:
    blur(5px);

  transition:.3s;
}

.kc-sim-overlay.open{
  visibility:visible;
  opacity:1;
}

.kc-sim-drawer{
  width:min(520px,100%);

  height:100%;

  position:absolute;

  right:0;
  top:0;

  padding:28px;

  overflow:auto;

  transform:
    translateX(105%);

  background:
    radial-gradient(
      420px 350px at 70% 0,
      rgba(38,145,255,.13),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #0b1826,
      #050c14
    );

  border-left:
    1px solid
    rgba(255,255,255,.08);

  box-shadow:
    -35px 0 100px
    rgba(0,0,0,.45);

  transition:
    transform .42s
    cubic-bezier(.2,.75,.2,1);
}

.kc-sim-overlay.open
.kc-sim-drawer{
  transform:none;
}

.kc-sim-close{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  margin-left:auto;

  cursor:pointer;

  border-radius:12px;

  border:
    1px solid
    rgba(255,255,255,.07);

  color:#9db1c3;

  background:
    rgba(255,255,255,.03);
}

.kc-sim-title{
  margin-top:30px;

  font-size:34px;
  letter-spacing:-1.8px;
}

.kc-sim-desc{
  margin-top:10px;

  color:#7c93a8;

  font-size:11px;
  line-height:1.7;
}

.kc-sim-live{
  margin-top:25px;

  padding:15px;

  border-radius:16px;

  border:
    1px solid
    rgba(255,255,255,.07);

  background:
    rgba(255,255,255,.025);
}

.kc-sim-content{
  margin-top:13px;
}

/* =========================================================
   PAGE COMMON
========================================================= */

.kc-public-page{
  min-height:100vh;

  color:#f7fbff;

  background:
    radial-gradient(
      900px 600px at 80% 2%,
      rgba(30,139,255,.15),
      transparent 67%
    ),
    #03070c;
}

.kc-page-hero{
  min-height:650px;

  display:grid;

  grid-template-columns:
    .86fr 1.14fr;

  align-items:center;

  gap:55px;

  padding:
    75px 0 95px;
}

.kc-page-hero-copy h1{
  margin-top:18px;

  font-size:
    clamp(55px,6vw,91px);

  line-height:.92;

  letter-spacing:-5.4px;
}

.kc-page-hero-copy p{
  max-width:590px;

  margin-top:25px;

  color:#869db2;

  font-size:16px;
  line-height:1.72;
}

.kc-page-image{
  min-height:500px;

  position:relative;
  overflow:hidden;

  border-radius:28px;

  border:
    1px solid
    rgba(255,255,255,.08);

  box-shadow:
    0 40px 100px
    rgba(0,0,0,.35);
}

.kc-page-image img{
  width:100%;
  height:100%;
  min-height:500px;

  position:absolute;
  inset:0;

  object-fit:cover;

  opacity:.72;
}

.kc-page-image:after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(4,11,18,.60),
      rgba(4,11,18,.04)
    );
}

.kc-detail{
  padding:
    20px 0 120px;
}

.kc-detail-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:13px;

  margin-top:40px;
}

.kc-detail-card{
  min-height:220px;

  padding:24px;

  border-radius:21px;

  border:
    1px solid
    rgba(255,255,255,.07);

  background:
    linear-gradient(
      145deg,
      #0b1928,
      #06101a
    );
}

.kc-detail-card span{
  color:#55bfff;
  font-size:9px;
  font-weight:800;
}

.kc-detail-card h3{
  margin-top:32px;
  font-size:18px;
}

.kc-detail-card p{
  margin-top:9px;

  color:#738a9f;

  font-size:10px;
  line-height:1.65;
}

/* =========================================================
   ADMIN MEDIA
========================================================= */

.kc-media-admin{
  max-width:1200px;

  margin:40px auto;

  padding:0 25px 60px;
}

.kc-media-admin h1{
  font-size:32px;
}

.kc-media-admin-intro{
  margin-top:10px;

  color:#7e96aa;
}

.kc-media-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:15px;

  margin-top:30px;
}

.kc-media-card{
  padding:18px;

  border-radius:20px;

  border:
    1px solid
    rgba(255,255,255,.08);

  background:#0a1724;
}

.kc-media-preview{
  width:100%;
  height:210px;

  overflow:hidden;

  border-radius:14px;

  background:#07111c;
}

.kc-media-preview img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.kc-media-card h3{
  margin-top:14px;
}

.kc-media-file{
  width:100%;

  margin-top:12px;

  color:#8fa6ba;
}

.kc-media-save{
  margin-top:12px;

  padding:10px 14px;

  cursor:pointer;

  border:0;
  border-radius:11px;

  color:white;

  background:
    linear-gradient(
      135deg,
      #2c9bff,
      #096bd0
    );
}

.kc-media-status{
  min-height:18px;

  margin-top:8px;

  color:#70889d;

  font-size:9px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1100px){

  .kc-mega-nav{
    display:none;
  }

  .kc-operation-buy,
  .kc-operation-sell,
  .kc-operation-deposit,
  .kc-operation-withdraw,
  .kc-operation-convert,
  .kc-page-hero{
    grid-template-columns:1fr;
  }

  .kc-operation-sell .kc-op-visual,
  .kc-operation-withdraw .kc-op-visual{
    order:initial;
  }

  .kc-op-copy{
    padding:
      50px 38px 10px;
  }

  .kc-op-visual{
    padding:30px;
  }
}

@media(max-width:720px){

  .kc-ops-experience{
    padding-bottom:90px;
  }

  .kc-operation{
    min-height:auto;
  }

  .kc-op-copy{
    padding:
      42px 23px 5px;
  }

  .kc-op-visual{
    min-height:520px;

    padding:22px 14px;
  }

  .kc-op-photo{
    height:440px;
  }

  .kc-live-widget,
  .kc-flow-widget,
  .kc-withdraw-widget,
  .kc-convert-widget{
    width:calc(100% - 42px);

    left:21px !important;
    right:21px !important;

    bottom:37px;
  }

  .kc-detail-grid{
    grid-template-columns:1fr;
  }

  .kc-page-hero{
    padding-top:45px;
  }

  .kc-page-hero-copy h1{
    font-size:52px;
    letter-spacing:-3.8px;
  }

  .kc-media-grid{
    grid-template-columns:1fr;
  }
}