/*PAGE LOADING STYLES FROM THE THEME*/
.page-loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .4s .2s ease-in-out;
  transition: all .4s .2s ease-in-out;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
}
.dark-mode .page-loading {
  background-color: #0b0f19;
}
.page-loading.active {
  opacity: 1;
  visibility: visible;
}
.page-loading-inner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  opacity: 0;
}
.page-loading.active > .page-loading-inner {
  opacity: 1;
}
.page-loading-inner > span {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  color: #9397ad;
}
.dark-mode .page-loading-inner > span {
  color: #fff;
  opacity: .6;
}
.page-spinner {
  display: inline-block;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: .75rem;
  vertical-align: text-bottom;
  border: .15em solid #b4b7c9;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spinner .75s linear infinite;
  animation: spinner .75s linear infinite;
}
.dark-mode .page-spinner {
  border-color: rgba(255,255,255,.4);
  border-right-color: transparent;
}
@-webkit-keyframes spinner {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/*PAGE LOADING STYLES FROM THE THEME*/




/*DARK MODE*/
.dark-mode .custom-white{
  background-color:white;
}
.custom-white{
  background-color:black;
}

/*DARK MODE*/

.comparison-table {
    width:100%;
    max-width:1000px;
    margin:0 auto;
  box-shadow: 0 0 30px rgba(0,0,0,.15);
      border-radius:10px;
      padding:0;
      color:#3B3B3B;
  }
  .comparison-table table{
    min-width:720px;
  }
  .comparison-table ul {
    display:flex;
    top:0px;
    z-index:10;
    padding-bottom:14px;
  }
  .comparison-table li {
    list-style:none;
    flex:1;
  }
  .comparison-table li:last-child {
    border-right:1px solid #DDD;
  }
  .comparison-table button {
    width:100%;
    border: 1px solid #DDD;
    border-right:0;
    border-top:0;
    padding: 10px;
    background:#FFF;
    font-size:14px;
    font-weight:bold;
    height:60px;
    color:#999
  }
  .comparison-table li.active button {
    background:#F5F5F5;
    color:#000;
  }
  .comparison-table table { border-collapse:collapse; table-layout:fixed; width:100%; }
  .comparison-table th { background:white; }
  .comparison-table td, th {
    height:53px
  }
  .comparison-table td,th { 
      padding:10px; 
      empty-cells:show; 
  }
  .comparison-table td,th {
    text-align:left;
    background-color:white;
  }
  .comparison-table td+td, th+th {
    text-align:center;
  }
  .bg-red {
    border-top:3px solid #f20000;
  }
  .bg-purple {
    border-top:3px solid #9575cd;
  }
  .bg-blue {
    border-top:3px solid #0097CF;
  }
  .comparison-table .sep {
    background: #272727;
    font-weight: bold;
    color: white;
  }
  .comparison-table .quota { font-size:18px; font-weight:bold; }
  .comparison-table .txt-l { font-size:28px; font-weight:bold; }
  .comparison-table .txt-top { position:relative; top:-9px; left:-2px; }

  @media (max-width: 750px) {

    .comparison-table{
      overflow-x:auto;
    }
    .comparison-table thead{
      position:relative !important;
      top:0px !important;
    }
  
  }


/*CountDown Styles */
#clockdiv{
  color: #fff;
  display: block;
  max-width:280px;
  font-weight: bold;
  text-align: center;
  font-size: 30px;
  background-color: #0A0A0A;
  border: 5px solid #FF5353;
  border-radius: 4px;
}

#clockdiv .clock-items{
padding:10px 10px 2px 10px;
}
#clockdiv .clock-item{
  border-radius: 3px;
  display: inline-block;
}

#clockdiv .clock-item > span{
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  min-width: 75px;
  font-size: 1.4em;
  background-image: linear-gradient(bottom, #222222 50%, #303030 50%);
  background-image: -o-linear-gradient(bottom, #222222 50%, #303030 50%);
  background-image: -moz-linear-gradient(bottom, #222222 50%, #303030 50%);
  background-image: -webkit-linear-gradient(bottom, #222222 50%, #303030 50%);
  background-image: -ms-linear-gradient(bottom, #222222 50%, #303030 50%);
}

.smalltext{
  padding-top: 5px;
  font-size: 16px;
}



/*DISCOUNT – MOBILE OPTIMIZATION*/
@media (max-width: 576px) {

    /* Smaller close button on mobile – discount modal only */
  .discount-body .btn-close {
    width: 22px !important;
    height: 22px !important;
    font-size: 1.25rem !important;
    opacity: 1 !important;
  }
    /* Smaller close button on mobile – discount modal only */
  .discount-body .discount-title {
    font-size:2.4rem !important;
  }
  .discount-body p {
    font-size:0.9rem !important;
  } 
  .discount-cta {
    font-size: 0.9rem !important; /* smaller than fs-5 */
    padding: 10px 14px !important;;
  }

  /* Icon */
  .discount-cta-icon {
    font-size: 1.2rem !important; /* down from fs-3 */
  }
}



/*Join Group Card Styles */
.group-content{
  position: relative;
  overflow: hidden; 
  }
.group-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius:0.75rem;
  backdrop-filter: blur(10px); /* Apply blur to the overlay */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.5s ease; /* Add transition for smooth effect */  
}
.group-content:hover .group-overlay{
  opacity: 1;
  transition-duration: 0.5s;
  }
.group-button{
  opacity: 0;
  visibility: hidden;
  display: none;
  position: absolute;
  left: 50%;
  right: 50%;
  margin-top:53px;
  transform: translate(-50%,-50%);
  z-index: 100;
  width: 125px;
}
.group-content:hover .group-button {
  visibility: visible;
  opacity: 1;
  display:inline-block;
}


/*Telegram Sentiment Styles */
@media (max-width: 425px) {
  .gauge {
    width: 95% !important;
  }

  #sentimentindicator {
    height: 190px !important;
  }
}



/*Pricing Table Styles */
.pricing-table-subtitle {
  margin-top: 68px;
  font-weight: normal; }

.pricing-table-title {
  font-weight: bold;
  margin-bottom: 68px; }

.pricing-card {
  background-color:white;
  height: 630px;
  border: none;
  border-radius: 10px;
  margin-bottom: 40px;
  text-align: center;
  -webkit-transition: all 0.6s;
  transition: all 0.6s; 
}
  .pricing-card:hover {
    box-shadow: 0 2px 40px 0 rgba(205, 205, 205, 0.55); }
  .pricing-card.pricing-card-highlighted {
    box-shadow: 0 2px 40px 0 rgba(205, 205, 205, 0.55); }
  .pricing-card:hover {
    box-shadow: 0 2px 40px 0 rgba(205, 205, 205, 0.55);
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
  .pricing-card .card-body {
    padding-top: 55px;
    padding-bottom: 62px; }

.pricing-plan-title {
  font-size: 20px;
  color: #000;
  margin-bottom: 11px;
  font-weight: normal; }

.pricing-plan-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  font-size: 40px;
  line-height: 1;
  margin-bottom: 24px; }
.pricing-plan-features {
  display:inline-block;
  list-style: none;
  padding-left: 0;
  font-size: 16px;
  line-height: 2.14;
  margin-bottom: 20px;
  color: #303132;
  text-align: left;
}

  .pricing{
    color:black;
    line-height:1;
    display:flex;
    margin-bottom:7px;
    justify-content: center;
  }
  .pricing .sign{
    font-size:30px;
    font-weight:600;
    align-self:center;
    line-height: 2.1;
  }
  .pricing .currency{
    font-size:60px;
    font-weight:600;
  }
  .pricing .cent{
    font-size:18px;
    font-weight:300;
    line-height:2;
  }
  .pricing-plan-subtext {
    display:block;
    font-size: 14px;
    line-height: 1.1;
    color: #565973; }
  .pricing-plan-area{
    background-color:#F7FAFF;
    margin-bottom: 30px;
    padding-top:18px;
    padding-bottom:18px;
  }
  .pricing-plan-free {
    display:inline-block;
    position:relative;
    font-size: 50px;
    color: #000;
    font-weight: bold;
    margin-bottom:0; }


.pricing-plan-purchase-btn {
  color: #000;
  font-size: 18px;
  font-weight: bold;
  width: 190px;
  height: 50px;
  border-radius: 10px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-pack: center;
  justify-content: center;
  margin-bottom: 20px;
}
.pricing-plan-comparison-btn {
  color: #000;
  font-size: 16px;
  font-weight: bold;
  width: 145px;
  height: 45px;
  border-radius: 10px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  -webkit-box-pack: center;
  justify-content: center;
}
.pricing-plan-basic .pricing-plan-purchase-btn {
background-color: #fe397a;
color: #fff; }
.pricing-plan-basic .pricing-plan-purchase-btn:hover {
box-shadow: 0 3px 0 0 #b7013d !important; }
.pricing-plan-basic .pricing-plan-purchase-btn:active {
-webkit-transform: translateY(3px);
    transform: translateY(3px);
box-shadow: none; }
.pricing-plan-pro .pricing-plan-purchase-btn {
background-color: #5d78ff;
color: #fff; }
.pricing-plan-pro .pricing-plan-purchase-btn:hover {
box-shadow: 0 3px 0 0 #3046BA !important; }
.pricing-plan-pro .pricing-plan-purchase-btn:active {
-webkit-transform: translateY(3px);
    transform: translateY(3px);
box-shadow: none; }
.pricing-plan-adfree .pricing-plan-purchase-btn {
background-color: #10bb87;
color: #fff; }
.pricing-plan-adfree .pricing-plan-purchase-btn:hover {
box-shadow: 0 3px 0 0 #0C8762 !important; }
.pricing-plan-adfree .pricing-plan-purchase-btn:active {
-webkit-transform: translateY(3px);
    transform: translateY(3px);
box-shadow: none; }

.pricing-plan-tab .nav-link.active{
  background-color:#393939;
}

@media (min-width: 768px) {

  #starter.tab-pane{
    display:block !important;
    opacity: 1 !important;
  }
  #adfree.tab-pane{
    display:block !important;
    opacity: 1 !important;
  }
  #pro.tab-pane{
    display:block !important;
    opacity: 1 !important;
  }

  .pricing-plan-tab{
    display:none !important;
  }

}

.pricing-corner-badge {
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  background: rgba(16, 187, 135, .14);
  color: #10bb87;
  border: 1px solid rgba(16, 187, 135, .28);
  display: none; /* shown by JS when relevant */
  z-index: 5;
}

/* Make sure the badge can position relative to the card */
.pricing-card, .pricing-card .card-body {
  position: relative;
}

/* Nice "Forever" style */
.pricing-corner-badge.is-forever {
  background: rgba(16, 187, 135, .14);
  color: #10bb87;
  border-color: rgba(16, 187, 135, .28);
}



/* Pricing Plan Switch */
.billing-toggle {
  display: inline-block;
  position: relative;
}

/* Hide radios */
.billing-toggle input {
  display: none;
}

.toggle-pill {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 6px;
  min-width: 340px;
  box-shadow: 0 8px 25px rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

.toggle-option {
  z-index: 2;
  padding: 10px 0;
  font-weight: 700;
  font-size: 14px;
  color: #6c757d;
  cursor: pointer;
  transition: color .25s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  user-select: none;
}

/* Badges inside toggle */
.toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-1px);
  white-space: nowrap;
}

.toggle-badge-forever {
  background: rgba(93, 120, 255, .14);
  color: #5d78ff;
  border: 1px solid rgba(93, 120, 255, .28);
}

/* Slider */
.toggle-slider {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(33.333% - 4px);
  height: calc(100% - 12px);
  background: linear-gradient(135deg, #5d78ff, #10bb87);
  border-radius: 999px;
  transition: transform .3s ease;
  box-shadow: 0 4px 12px rgba(93,120,255,.35);
}

/* Monthly */
#billingMonthly:checked ~ .toggle-pill .toggle-slider { transform: translateX(0%); }
#billingMonthly:checked ~ .toggle-pill .toggle-option:nth-child(1) { color: #fff; }

/* Yearly */
#billingYearly:checked ~ .toggle-pill .toggle-slider { transform: translateX(100%); }
#billingYearly:checked ~ .toggle-pill .toggle-option:nth-child(2) { color: #fff; }
#billingYearly:checked ~ .toggle-pill .toggle-option:nth-child(2) .toggle-badge-save {
  background: rgba(255,255,255,.22);
  color: #fff;
  border-color: rgba(255,255,255,.35);
}

/* Lifetime */
#billingLifetime:checked ~ .toggle-pill .toggle-slider { transform: translateX(200%); }
#billingLifetime:checked ~ .toggle-pill .toggle-option:nth-child(3) { color: #fff; }
#billingLifetime:checked ~ .toggle-pill .toggle-option:nth-child(3) .toggle-badge-forever {
  background: rgba(255,255,255,.22);
  color: #fff;
  border-color: rgba(255,255,255,.35);
}

/* Mobile fit */
@media (max-width: 420px) {
  .toggle-option { font-size: 13px; }
  .toggle-badge { font-size: 10px; padding: 3px 7px; }
}


/* PAYMENT FORM */
.paymentform{
  margin:0 auto;
  text-align:center;
  max-width:500px;
  padding: 20px 40px 20px 40px;
  margin-top:50px;
}
.payment-types {
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}
.payment-type{
width:100%; 
height:65px;
border: 3px solid #53FF94;
border-radius: 3px;
    margin: 0 0px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.payment-type:hover{
background-color:rgba(83,255,148,.25); 
cursor: pointer;
}
.payment-type img{
max-width: 129px;
max-height: 66px;
}

.payment-types input[type="radio"] {
display:none;
}

.payment-types input[type="radio"]:checked + .payment-type{
background-color:rgba(83,255,148,.3); 
}

@media (max-width: 768px) {
.paymentform{
  padding: 10px !important;
  margin-top:10px !important;
}
.payment-type{
  margin: 0 5px 5px;  
}
}

  /* Loader Animation*/
  .loader {
    display: inline-block;
    position: relative;
    width: 73px;
    height: 73px;
  }
  .loader div {
    position: absolute;
    border: 4px solid red;
    opacity: 1;
    border-radius: 50%;
    animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .loader div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes loader {
    0% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: 0px;
      left: 0px;
      width: 72px;
      height: 72px;
      opacity: 0;
    }
  }

/* As Seeon On Brands */
.brand-image {
  filter: grayscale(100%);  /* Apply grayscale effect */
  transition: filter 0.3s ease;  /* Smooth transition for color reveal */
}
.brand-image:hover {
  filter: grayscale(0%);  /* Remove grayscale on hover */
}


/*Youtube Video Popup */
/* ✅ VIDEO THUMB STYLES (put into custom.css) */
.video-thumb{
  cursor:pointer;
  transition:transform .25s ease;
}

/* Keep image at the bottom layer */
.video-thumb img{
  position:relative;
  z-index:0;
}

/* Darken image on hover WITHOUT affecting button/caption */
.video-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.28);
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
  z-index:1;
  border-radius:inherit;
}

.video-thumb:hover::before{
  opacity:1;
}

/* ---------- PLAY BUTTON ---------- */
.video-thumb .play-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  z-index:2;
}

/* White circle */
.video-thumb .play-overlay::before{
  content:"";
  width:70px;
  height:70px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}

/* Black triangle */
.video-thumb .play-overlay::after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border-left:20px solid #000;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  margin-left:4px;
}

/* Slight button pop on hover */
.video-thumb:hover .play-overlay::before{
  transform:scale(1.06);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}

/* ---------- CAPTION ---------- */
.video-thumb .video-caption{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;

  padding:6px 10px;
  font-size:.875rem;
  font-weight:500;
  color:#fff;
  border-radius:8px;

  background:linear-gradient(135deg, rgba(0,0,0,.75), rgba(0,0,0,.45));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  opacity:0;
  transform:translateY(-4px);
  transition:opacity .2s ease, transform .2s ease;
}

/* Fade caption in on hover */
.video-thumb:hover .video-caption{
  opacity:1;
  transform:translateY(0);
}

/* ---------- RESPONSIVE (optional) ---------- */
@media (max-width: 768px){
  .video-thumb .play-overlay::before{
    width:55px;
    height:55px;
  }
  .video-thumb .play-overlay::after{
    border-left:14px solid #000;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    margin-left:2px;
  }
}


  .tg-btn {
    background-color: #229ED9;
    color: #fff;
    font-weight: 700;
    width: 320px;
    max-width: 90%;
    border-radius: 10px;
  }

  .tg-btn:hover {
    background-color: #1b8bbf;
    color: #fff;
  }

  .discord-btn {
    background-color: #5865F2;
    color: #fff;
    font-weight: 700;
    width: 320px;
    max-width: 90%;
    border-radius: 10px;
  }

  .discord-btn:hover {
    background-color: #4752c4;
    color: #fff;
  }


      /* ===== CoinTrendzBot Phone Embed — COMPLETE (360px x 670px, static) ===== */

    .ctz-phone-host{
      display:grid;
      place-items:center;
      padding: 24px;
      background: transparent;
    }

    /* Sharp text */
    .ctz-phone,
    .ctz-phone *{
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: geometricPrecision;
      font-synthesis: none;
    }

    /* ================= PHONE FRAME ================= */

    .ctz-phoneFrame{
      position: relative;
      /* responsive width: min 300px, ideal 360px, max 360px */
      width: clamp(300px, 92vw, 360px);
      /* keep the same 360:670 ratio (~1.861) */
      height: calc(clamp(300px, 92vw, 360px) * 1.861);
      border-radius: 36px;
      padding: 10px;
      background: linear-gradient(180deg, #1a2230, #0b0f16);
      box-shadow: 0 20px 50px rgba(0,0,0,.28);
      border: 1px solid rgba(255,255,255,.12);
      overflow: hidden;
    }

    .ctz-phoneFrame::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background: radial-gradient(700px 420px at 25% 10%, rgba(255,255,255,.10), transparent 45%);
      pointer-events:none;
    }

    .ctz-phone{
      position:relative;
      width:100%;
      height:100%;
      border-radius:24px;
      overflow:hidden;
      background:#eef3f7;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.70),
        inset 0 0 0 2px rgba(0,0,0,.20),
        0 0 0 1px rgba(0,0,0,.22);
    }

    /* ================= NOTCH ================= */

    .ctz-notch{
      position:absolute;
      top:7px;
      left:50%;
      transform:translateX(-50%);
      width:44%;
      height:20px;
      border-radius:14px;
      background:rgba(0,0,0,.90);
      z-index:10;
      pointer-events:none;
    }

    /* ================= STATUS ================= */

    .ctz-status{
      position:absolute;
      top:10px;
      left:12px;
      right:12px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:10px;
      color:rgba(0,0,0,.80);
      z-index:9;
      pointer-events:none;
    }

    .ctz-statusRight{
      display:flex;
      align-items:center;
      gap:6px;
    }

    .ctz-sig{
      display:flex;
      gap:2px;
      align-items:flex-end;
    }

    .ctz-sig i{
      display:block;
      width:3px;
      border-radius:2px;
      background:rgba(0,0,0,.65);
    }

    .ctz-sig i:nth-child(1){height:4px; opacity:.4}
    .ctz-sig i:nth-child(2){height:6px; opacity:.6}
    .ctz-sig i:nth-child(3){height:8px; opacity:.75}
    .ctz-sig i:nth-child(4){height:10px;}

    .ctz-battery{
      width:20px;
      height:10px;
      border-radius:4px;
      border:1px solid rgba(0,0,0,.60);
      position:relative;
    }

    .ctz-battery::after{
      content:"";
      position:absolute;
      right:-3px;
      top:2px;
      width:2px;
      height:5px;
      background:rgba(0,0,0,.60);
      border-radius:2px;
    }

    .ctz-batteryFill{
      position:absolute;
      left:2px;
      top:2px;
      bottom:2px;
      width:70%;
      background:linear-gradient(90deg,#2ecc71,#27ae60);
      border-radius:3px;
    }

    /* ================= TOPBAR ================= */

    .ctz-topbar{
      position:absolute;
      top:36px;
      left:0;
      right:0;
      height:52px;
      display:flex;
      align-items:center;
      gap:8px;
      padding:0 12px;
      background:rgba(255,255,255,.96);
      border-bottom:1px solid rgba(0,0,0,.07);
      z-index:5;
    }

    .ctz-avatar{
      width:32px;
      height:32px;
      border-radius:50%;
      overflow:hidden;
      border:1px solid rgba(0,0,0,.10);
      background:#fff;
      flex:0 0 auto;
    }

    .ctz-avatar img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .ctz-meta{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }

    .ctz-title{
      font-size:12px;
      font-weight:700;
      color:#0f172a;
    }

    .ctz-sub{
      font-size:9px;
      color:rgba(15,23,42,.55);
    }

    .ctz-icons{
      margin-left:auto;
      display:flex;
      gap:8px;
      opacity:.95;
    }

    .ctz-icons span{
      width:26px;
      height:26px;
      display:grid;
      place-items:center;
      border-radius:9px;
      background:rgba(0,0,0,.04);
      border:1px solid rgba(0,0,0,.07);
    }

    .ctz-icons svg{
      width:13px;
      height:13px;
      fill:rgba(15,23,42,.80);
    }

    /* ================= CHAT ================= */

    .ctz-chat{
      position:absolute;
      top:86px;
      bottom:60px;
      left:0;
      right:0;
      padding:8px;
      overflow:hidden;
    }

    .ctz-watermark{
      position:absolute;
      inset:0;
      background:
        radial-gradient(650px 420px at 20% 20%, rgba(27,116,255,.08), transparent 60%),
        radial-gradient(650px 420px at 80% 30%, rgba(46,204,140,.07), transparent 60%);
      pointer-events:none;
      opacity:.85;
    }

    .ctz-msgList{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:8px;
      overflow-y:auto;                   /* allow full chart */
      -webkit-overflow-scrolling: touch;
      scrollbar-width:none;              /* hide scrollbar FF */
    }
    .ctz-msgList::-webkit-scrollbar{ width:0; height:0; } /* hide scrollbar webkit */

    /* Today pill */
    .ctz-divider{
      align-self:center;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:4px 10px;
      border-radius:999px;
      background: rgba(255,255,255,.70);
      border: 1px solid rgba(0,0,0,.08);
      color: rgba(15,23,42,.60);
      font-size:10.5px;
      line-height:1;
      box-shadow: 0 6px 14px rgba(0,0,0,.06);
      margin: 2px 0 2px;
    }

    /* ================= MESSAGE ROWS ================= */

    .ctz-row{ display:flex; }
    .ctz-row.in{ justify-content:flex-start; }
    .ctz-row.out{ justify-content:flex-end; }

    .ctz-bubble{
      max-width:80%;
      padding:8px 10px;
      border-radius:14px;
      border:1px solid rgba(0,0,0,.06);
      box-shadow: 0 6px 14px rgba(0,0,0,.08);
      background:#fff;
      color:#0f172a;
      font-size:12.5px;
      line-height:1.25;

      opacity:0;
      transform: translateY(6px);
      animation: ctz-pop .32s ease forwards;
    }

    @keyframes ctz-pop{
      to{opacity:1; transform: translateY(0);}
    }

    .ctz-row.out .ctz-bubble{
      background: linear-gradient(180deg, #3b7bff, #2f6cff);
      color:#fff;
      border-color: rgba(255,255,255,.18);
    }

    .ctz-metaRow{
      margin-top:4px;
      font-size:9.5px;
      display:flex;
      justify-content:flex-end;
      gap:4px;
      color:rgba(0,0,0,.50);
    }
    .ctz-row.out .ctz-metaRow{
      color:rgba(255,255,255,.78);
    }

    .ctz-tick{
      width:12px;
      height:8px;
      opacity:.95;
    }

    /* ================= BOT INFO (Screenshot Style) ================= */

    .ctz-info{
      font-size:12.2px;
      line-height:1.2;
      color: rgba(15,23,42,.92);
    }

    .ctz-line{
      display:flex;
      gap:6px;
      align-items:flex-start;
    }
    .ctz-line + .ctz-line{ margin-top:2px; }

    .ctz-emoji{
      width:15px;
      flex:0 0 15px;
      text-align:center;
      line-height:1.2;
    }

    .ctz-content{
      flex:1 1 auto;
      min-width:0;
    }

    .ctz-info a{
      color:#1b74ff;
      text-decoration:none;
      font-weight:700;
    }

    .ctz-muted{
      color: rgba(15,23,42,.62);
    }

    .ctz-num{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      font-weight:600;
    }

    /* ================= BOT TYPING / LOADING BUBBLE ================= */

    .ctz-typing{
      display:flex;
      align-items:center;
      padding:2px 0;
    }

    .ctz-dots{
      display:flex;
      gap:4px;
      align-items:center;
    }

    .ctz-dots i{
      width:5px;
      height:5px;
      border-radius:50%;
      background: rgba(15,23,42,.70);
      opacity:.35;
      animation: ctz-bounce 1s infinite;
    }

    .ctz-dots i:nth-child(2){ animation-delay:.15s; }
    .ctz-dots i:nth-child(3){ animation-delay:.3s; }

    @keyframes ctz-bounce{
      0%,100%{ transform: translateY(0); opacity:.35; }
      50%{ transform: translateY(-3px); opacity:.75; }
    }

    /* ================= CHART + LOADING SHIMMER ================= */

    .ctz-chartWrap{
      margin-top:6px;
      border-radius:10px;
      overflow:hidden;
      border:1px solid rgba(0,0,0,.08);
      background:#fff;
    }

    /* Skeleton shimmer shown until image loads */
    .ctz-skeleton{
      height: 180px;
      position:relative;
      background: #f2f4f7;
      overflow:hidden;
    }
    .ctz-skeleton::after{
      content:"";
      position:absolute;
      inset:-40px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
      transform: translateX(-60%);
      animation: ctz-shimmer 1.1s infinite;
    }
    @keyframes ctz-shimmer{
      to{ transform: translateX(60%); }
    }

    .ctz-chartImg{
      width:100%;
      max-height:220px;        /* allow full visibility */
      object-fit: contain;     /* no crop */
      display:block;
      background:#fff;
    }

    /* ================= INPUT ================= */

    .ctz-input{
      position:absolute;
      bottom:0;
      left:0;
      right:0;
      height:60px;
      padding:6px 8px;
      background: rgba(255,255,255,.96);
      border-top:1px solid rgba(0,0,0,.08);
      display:flex;
      gap:8px;
      align-items:center;
      z-index:6;
    }

    .ctz-compose{
      flex:1;
      min-height:34px;
      padding:6px 10px;
      border-radius:12px;
      background: rgba(0,0,0,.04);
      border:1px solid rgba(0,0,0,.08);
      display:flex;
      gap:8px;
      align-items:center;
      overflow:hidden;
    }

    .ctz-placeholder{
      font-size:12px;
      color: rgba(0,0,0,.45);
      flex:1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .ctz-typingText{
      font-size:12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      color: rgba(15,23,42,.92);
      flex:1;
      display:none;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .ctz-cursor{
      width:7px;
      height:14px;
      border-radius:6px;
      background: rgba(15,23,42,.95);
      opacity:.55;
      animation: ctz-blink 1s steps(2,end) infinite;
      display:none;
      flex:0 0 auto;
    }
    @keyframes ctz-blink{
      50%{ opacity:.12; }
    }

    .ctz-send{
      width:34px;
      height:34px;
      border-radius:10px;
      background: rgba(0,0,0,.05);
      border:1px solid rgba(0,0,0,.10);
      display:grid;
      place-items:center;
      cursor:pointer;
      user-select:none;
    }
    .ctz-send svg{
      width:14px;
      height:14px;
      fill: rgba(0,0,0,.80);
    }
    /* ===== Hero positioning for the phone ===== */
.ctz-hero-phone-wrap{
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Subtle glow behind the phone */
.ctz-hero-phone-wrap::before{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  max-width: 95%;
  max-height: 95%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-52%);
  background:
    radial-gradient(circle at 35% 30%, rgba(99,135,241,.25), transparent 55%),
    radial-gradient(circle at 70% 55%, rgba(218,70,239,.18), transparent 58%),
    radial-gradient(circle at 45% 75%, rgba(99,135,241,.15), transparent 60%);
  filter: blur(10px);
  opacity: .9;
  pointer-events:none;
  z-index: 0;
}

.ctz-phone-host{
  position: relative;
  z-index: 1;                  /* above glow */
  padding: 0;                  /* remove extra padding if you had it */
  background: transparent;
}

/* keep it crisp + prevent accidental stretching */
#ctzPhone{
  flex: 0 0 auto;
}

/* Desktop: align to the right side of the hero column (looks premium) */
@media (min-width: 768px){
  .ctz-hero-phone-wrap{
    padding-right: 8px;
  }
}

/* Large desktop: pull it up a bit for better balance with headline */
@media (min-width: 1200px){
  .ctz-hero-phone-wrap{
    margin-top: -10px;
  }
}