/* ==========================================================

   Landing Page CSS — Quotex Pro

   Loaded AFTER main.css to fix layouts & enhance design

   ========================================================== */



/* ---------- LAYOUT FIXES (force proper display) ---------- */



/* Hero two-column grid */

.hero-split {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: 40px !important;

  align-items: center !important;

}



/* Hide bracket decorations & glow */

.slider-bracket { display: none !important; }

.slider-glow { display: none !important; }



/* Simpler slider box */

.hero {

  padding: 70px 0 50px !important;

  min-height: auto !important;

  border-bottom: 1px solid var(--border) !important;

}

.hero-right-slider {

  max-width: 500px !important;

}

.hero-slider-box {

  height: 280px !important;

  border-radius: 12px !important;

  border: 1.5px solid rgba(0,229,255,0.2) !important;

  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 18px rgba(0,229,255,0.05) !important;

}

.hero-title-line, .hero-title-accent {

  font-size: 46px !important;

}



/* --- Hero platform badge row (dark theme) --- */
.hero-platforms-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}
.hero-plat-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 13px;
  border-radius: 20px;
  border: 1px solid;
}
.hero-plat-quotex  { color: #ffab40; border-color: rgba(255,171,64,0.45); background: rgba(255,171,64,0.1); }
.hero-plat-exnova  { color: #00e5ff; border-color: rgba(0,229,255,0.45); background: rgba(0,229,255,0.08); }
.hero-plat-pocket  { color: #f472b6; border-color: rgba(244,114,182,0.45); background: rgba(244,114,182,0.08); }
.hero-plat-sep     { font-size: 14px; color: rgba(255,255,255,0.35); font-weight: 700; }
.hero-pill-cyan    { color: #00e5ff !important; border-color: rgba(0,229,255,0.55) !important; }

/* Ticker bar — force horizontal scroll */

.ticker-bar {

  display: block !important;

  height: 42px !important;

  overflow: hidden !important;

  position: relative !important;

  background: var(--bg2) !important;

  border-bottom: 1px solid var(--border) !important;

}

.ticker-bar::before,

.ticker-bar::after {

  content: '' !important;

  position: absolute !important;

  top: 0 !important;

  bottom: 0 !important;

  width: 50px !important;

  z-index: 2 !important;

  pointer-events: none !important;

}

.ticker-bar::before { left: 0 !important; background: linear-gradient(90deg, var(--bg2), transparent) !important; }

.ticker-bar::after  { right: 0 !important; background: linear-gradient(-90deg, var(--bg2), transparent) !important; }

.ticker-track {

  display: flex !important;

  flex-wrap: nowrap !important;

  width: max-content !important;

  height: 42px !important;

  align-items: center !important;

  gap: 0 !important;

  animation: tickerScrollFix 35s linear infinite !important;

}

@keyframes tickerScrollFix {

  from { transform: translateX(0); }

  to   { transform: translateX(-50%); }

}

.ticker-item {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 0 22px !important;

  white-space: nowrap !important;

  height: 100% !important;

  font-family: 'Courier New', monospace !important;

  font-size: 13px !important;

  border-right: 1px solid rgba(255,255,255,0.05) !important;

}



/* AI Engine — hide old terminal & side panel */

.ai-engine-section {

  padding: 70px 0 !important;

}

.ai-engine-grid {

  display: none !important;

}



/* --- NEW: Bot Scene (robot + PC + chart) --- */

.bot-scene-wrap {

  max-width: 720px;

  margin: 0 auto 30px;

  border: 1px solid rgba(0,229,255,0.12);

  border-radius: 16px;

  overflow: hidden;

  background: rgba(5, 10, 18, 0.9);

  box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 0 25px rgba(0,229,255,0.04);

  padding: 20px;

}

.bot-scene-svg {

  width: 100%;

  height: auto;

  display: block;

  filter: drop-shadow(0 0 8px rgba(0,229,255,0.08));

}



/* Robot animations */

.antenna-pulse {

  animation: lAntPulse 1.5s ease-in-out infinite;

}

@keyframes lAntPulse {

  0%, 100% { fill: #00e5ff; opacity: 1; }

  50%      { fill: #00e676; opacity: 0.5; }

}



.eye-blink {

  animation: lEyeBlink 4s ease infinite;

}

@keyframes lEyeBlink {

  0%, 44%, 56%, 100% { opacity: 0.85; }

  50%                 { opacity: 0.12; }

}



.mouth-talk {

  animation: lMouth 2s ease-in-out infinite;

}

@keyframes lMouth {

  0%, 100% { width: 20px; }

  50%      { width: 26px; }

}



.chest-flicker {

  animation: lChest 3s ease-in-out infinite;

}

@keyframes lChest {

  0%, 100% { fill: #00e676; }

  50%      { fill: #00e5ff; }

}



.arm-left {

  transform-origin: center top;

  animation: lArmL 2.5s ease-in-out infinite;

}

.arm-right {

  transform-origin: center top;

  animation: lArmR 2.5s ease-in-out infinite 0.4s;

}

@keyframes lArmL {

  0%, 100% { transform: rotate(0deg); }

  50%      { transform: rotate(-8deg); }

}

@keyframes lArmR {

  0%, 100% { transform: rotate(0deg); }

  50%      { transform: rotate(8deg); }

}



.price-dot-pulse {

  animation: lDotPulse 1.5s ease-in-out infinite;

}

@keyframes lDotPulse {

  0%, 100% { r: 3.5; opacity: 1; }

  50%      { r: 6;   opacity: 0.5; }

}



.chart-candles {

  animation: lCandleShift 12s linear infinite;

}

@keyframes lCandleShift {

  from { transform: translateX(0); }

  to   { transform: translateX(-10px); }

}



.chart-price-line {

  stroke-dasharray: 800;

  stroke-dashoffset: 800;

  animation: lPriceDraw 2.5s ease forwards;

}

@keyframes lPriceDraw {

  to { stroke-dashoffset: 0; }

}



.call-btn-pulse {

  animation: lCallPulse 2s ease-in-out infinite;

}

@keyframes lCallPulse {

  0%, 100% { stroke-opacity: 1; }

  50%      { stroke-opacity: 0.35; }

}



.put-btn-pulse {

  animation: lPutPulse 2s ease-in-out infinite 0.5s;

}

@keyframes lPutPulse {

  0%, 100% { stroke-opacity: 1; }

  50%      { stroke-opacity: 0.35; }

}



.scene-blink {

  animation: lSceneBlink 1.5s ease-in-out infinite;

}

@keyframes lSceneBlink {

  0%, 100% { opacity: 1; }

  50%      { opacity: 0.25; }

}



.trade-popup-1 { animation: lFloat1 4s ease-in-out infinite; }

.trade-popup-2 { animation: lFloat2 4s ease-in-out infinite 1.5s; }

@keyframes lFloat1 {

  0%, 100% { opacity: 0.8; transform: translateY(0); }

  50%      { opacity: 1;   transform: translateY(-6px); }

}

@keyframes lFloat2 {

  0%, 100% { opacity: 0.6; transform: translateY(0); }

  50%      { opacity: 1;   transform: translateY(-5px); }

}



/* Stats row — force horizontal */

.ai-stats-row {

  display: flex !important;

  justify-content: center !important;

  gap: 18px !important;

  flex-wrap: wrap !important;

  margin-top: 45px !important;

}

.ai-stat-card {

  min-width: 130px !important;

  padding: 18px 24px !important;

  text-align: center !important;

  background: rgba(255,255,255,0.025) !important;

  border: 1px solid rgba(255,255,255,0.06) !important;

  border-radius: 10px !important;

  transition: all 0.3s !important;

}

.ai-stat-card:hover {

  border-color: rgba(0,229,255,0.2) !important;

  transform: translateY(-3px) !important;

}

.ai-stat-num {

  font-size: 28px !important;

  font-weight: 800 !important;

  color: var(--cyan) !important;

  font-family: 'Courier New', monospace !important;

}

.ai-stat-label {

  font-size: 11px !important;

  color: var(--muted) !important;

  text-transform: uppercase !important;

  letter-spacing: 1px !important;

}



/* ---------- FEATURES — force 4-column grid ---------- */

.features-section {

  padding: 70px 0 !important;

  background: var(--bg) !important;

}

.features-grid {

  display: grid !important;

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

  gap: 18px !important;

}

.feature-card-pro {

  background: var(--bg2) !important;

  border: 1px solid var(--border) !important;

  border-radius: 12px !important;

  padding: 24px 18px !important;

  text-align: center !important;

  transition: all 0.3s !important;

  position: relative !important;

  overflow: hidden !important;

}

.feature-card-pro::before {

  content: '' !important;

  position: absolute !important;

  top: 0 !important; left: 0 !important; right: 0 !important;

  height: 3px !important;

  background: linear-gradient(90deg, transparent, var(--cyan), transparent) !important;

  opacity: 0 !important;

  transition: opacity 0.3s !important;

}

.feature-card-pro:hover {

  transform: translateY(-5px) !important;

  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;

  border-color: rgba(0,229,255,0.2) !important;

}

.feature-card-pro:hover::before { opacity: 1 !important; }

.feature-card-pro h3 { font-size: 15px !important; font-weight: 700 !important; margin-bottom: 6px !important; }

.feature-card-pro p  { font-size: 12px !important; color: var(--muted) !important; line-height: 1.6 !important; }

.fc-icon {

  font-size: 36px !important;

  margin-bottom: 12px !important;

  display: inline-block !important;

  width: 56px !important;

  height: 56px !important;

  line-height: 56px !important;

  border-radius: 12px !important;

}



/* ---------- PRICING — force 4-column grid ---------- */

.pricing-section {

  padding: 70px 0 !important;

  background: var(--bg2) !important;

}

.pricing-grid {

  display: grid !important;

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

  gap: 18px !important;

}

.price-card {

  background: var(--bg) !important;

  border: 1px solid var(--border) !important;

  border-radius: 14px !important;

  padding: 28px 18px !important;

  text-align: center !important;

  position: relative !important;

  overflow: hidden !important;

  transition: all 0.3s !important;

}

.price-card:hover {

  transform: translateY(-5px) !important;

  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;

}

.price-card-popular {

  border-color: var(--green) !important;

  box-shadow: 0 0 0 1px var(--green) inset, 0 0 25px rgba(0,230,118,0.06) !important;

}

.price-card-badge {

  position: absolute !important;

  top: 12px !important; right: -30px !important;

  transform: rotate(45deg) !important;

  background: var(--green) !important;

  color: #000 !important;

  font-size: 9px !important;

  font-weight: 800 !important;

  padding: 4px 38px !important;

  letter-spacing: 1px !important;

}

.price-card-name   { font-size: 20px !important; font-weight: 700 !important; margin-bottom: 4px !important; }

.price-card-desc   { color: var(--muted) !important; font-size: 13px !important; margin-bottom: 18px !important; }

.price-card-amount { font-size: 36px !important; font-weight: 800 !important; line-height: 1.1 !important; }

.price-curr        { font-size: 16px !important; font-weight: 600 !important; vertical-align: middle !important; opacity: 0.85 !important; }

.price-old-usdt    { font-size: 18px !important; color: var(--muted) !important; margin-bottom: 2px !important; }

.price-old-usdt s  { text-decoration: line-through !important; opacity: 0.7 !important; }

.price-card-inr    { font-size: 18px !important; font-weight: 700 !important; color: #e67e00 !important; margin-top: 6px !important; }

.price-inr-old     { font-size: 14px !important; opacity: 0.6 !important; font-weight: 400 !important; text-decoration: line-through !important; margin-left: 4px !important; }

.price-card-gst    { font-size: 11px !important; color: var(--muted) !important; margin-top: 4px !important; }

.price-card-gst s  { opacity: 0.6 !important; }

.price-card-features {

  list-style: none !important;

  text-align: left !important;

  margin: 20px 0 !important;

  font-size: 13px !important;

  color: var(--muted) !important;

  line-height: 2 !important;

  padding: 0 !important;

}



/* ---------- FOOTER — force 4-column grid ---------- */

.pro-footer {

  background: #060a10 !important;

  border-top: 1px solid var(--border) !important;

  padding: 50px 0 25px !important;

}

.footer-grid {

  display: grid !important;

  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;

  gap: 36px !important;

  margin-bottom: 36px !important;

}

.footer-brand p {

  color: var(--muted) !important;

  font-size: 13px !important;

  line-height: 1.7 !important;

  margin-top: 10px !important;

  max-width: 260px !important;

}

.footer-links h4 { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 12px !important; }

.footer-links a   { display: block !important; color: var(--muted) !important; font-size: 13px !important; margin-bottom: 7px !important; }

.footer-links a:hover { color: var(--cyan) !important; }

.footer-bottom {

  text-align: center !important;

  padding-top: 25px !important;

  border-top: 1px solid var(--border) !important;

  font-size: 12px !important;

  color: var(--muted) !important;

}



/* ---------- SECTION HEADERS ---------- */

.section-header    { text-align: center !important; margin-bottom: 40px !important; }

.section-label     { display: inline-block !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 2px !important; }

.section-header h2 { font-size: 34px !important; font-weight: 800 !important; margin-bottom: 12px !important; }

.section-desc      { color: var(--muted) !important; font-size: 15px !important; max-width: 550px !important; margin: 0 auto !important; }



/* ---------- RESPONSIVE ---------- */

@media (max-width: 960px) {

  .hero-split {

    grid-template-columns: 1fr !important;

    gap: 30px !important;

  }

  .hero-left-cta { text-align: center !important; max-width: 100% !important; }

  .hero-left-cta .hero-badge-row    { justify-content: center !important; }

  .hero-left-cta .hero-feature-pills { justify-content: center !important; }

  .hero-left-cta .hero-cta-row       { justify-content: center !important; }
  .hero-platforms-row { justify-content: center !important; }

  .hero-subtitle { margin-left: auto !important; margin-right: auto !important; }

  .hero-title-line, .hero-title-accent { font-size: 36px !important; }

  .hero-right-slider { max-width: 420px !important; }

  .hero { padding: 50px 0 40px !important; }

  .features-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .pricing-grid  { grid-template-columns: repeat(2, 1fr) !important; }

  .footer-grid   { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }

  .bot-scene-wrap { max-width: 100% !important; padding: 12px !important; }

}



@media (max-width: 600px) {

  .hero-title-line, .hero-title-accent { font-size: 28px !important; }

  .hero-subtitle { font-size: 14px !important; }

  .hero-slider-box { height: 200px !important; }

  .features-grid { grid-template-columns: 1fr !important; }

  .pricing-grid  { grid-template-columns: 1fr !important; }

  .footer-grid   { grid-template-columns: 1fr !important; }

  .section-header h2 { font-size: 26px !important; }

  .ai-stats-row { gap: 10px !important; }

  .ai-stat-card { min-width: 0 !important; padding: 12px 14px !important; }

  .ai-stat-num  { font-size: 22px !important; }

  .bot-scene-wrap { padding: 8px !important; }

}



/* ---------- SCROLL ANIMATIONS ---------- */

.fade-in {

  opacity: 0 !important;

  transform: translateY(20px) !important;

  transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;

}

.fade-in.visible {

  opacity: 1 !important;

  transform: translateY(0) !important;

}

.slide-up {

  opacity: 0 !important;

  transform: translateY(30px) !important;

  transition: opacity 0.6s ease-out, transform 0.6s ease-out !important;

}

.slide-up.visible {

  opacity: 1 !important;

  transform: translateY(0) !important;

}


/* ============================================================
   LIGHT ORANGE PROFESSIONAL THEME OVERRIDE
   ============================================================ */

/* --- Core Color Palette --- */
:root {
  --bg:      #fdf6ee;   /* warm off-white */
  --bg2:     #fceee0;   /* warm pale orange */
  --bg3:     #f9e7d0;   /* slightly deeper */
  --border:  #e8c99a;   /* golden orange border */
  --text:    #1e1e1e;   /* near-black text */
  --muted:   #6b5c4d;   /* warm brown muted */
  --cyan:    #e06600;   /* deep orange replaces cyan */
  --green:   #1a9938;   /* darker green for contrast */
  --red:     #cc2222;
  --gold:    #c8860a;
  --orange:  #e06600;
  --radius:  12px;
}

/* --- Global background & text --- */
body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
a { color: var(--cyan) !important; }
a:hover { color: #b54d00 !important; }

/* --- Navbar: Light orange solid --- */
.navbar {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
}
.navbar-brand { color: var(--text) !important; }
.navbar-brand span { color: var(--orange) !important; }
.nav-links a { color: var(--text) !important; }
.nav-links a:hover { color: var(--orange) !important; }

/* --- Buttons --- */
.btn-cyan {
  background: var(--orange) !important;
  color: #fff !important;
  border: none !important;
}
.btn-cyan:hover { background: #b54d00 !important; }
.btn-outline {
  border: 2px solid var(--orange) !important;
  color: var(--orange) !important;
  background: transparent !important;
}
.btn-outline:hover {
  background: var(--orange) !important;
  color: #fff !important;
}

/* --- Hero Section Override --- */
.hero {
  background: linear-gradient(160deg, #fdf1e4 0%, #fce5cc 100%) !important;
  padding: 70px 0 50px !important;
  min-height: auto !important;
  border-bottom: 1px solid var(--border) !important;
}
.hero-bg-grid,
.hero-bg-glow,
.hero-bg-glow-1,
.hero-bg-glow-2 { display: none !important; }

/* Stack hero vertically: text on top, slider underneath */
.hero-split {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 40px !important;
  text-align: center !important;
}

.hero-left-cta {
  width: 100% !important;
  text-align: center !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

/* Slider is placed BELOW the buttons */
.hero-right-slider {
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  order: 2 !important;
  position: relative !important;
}

/* Large, full-image, no crop */
.hero-slider-box {
  height: 520px !important;
  width: 100% !important;
  background: #fff !important;
  border: 2px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.10) !important;
  overflow: hidden !important;
}

/* Remove ALL slide entry/exit animations - just fade on/off */
.hero-slide {
  transition: none !important;
  animation: none !important;
}
.hero-slide.active { animation: none !important; }
.hero-slide.exit-left  { animation: none !important; }
.hero-slide.exit-right { animation: none !important; }

.hero-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;     /* Full image, never crops */
  object-position: center !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  background: #fff !important;
}

/* Slider controls */
.hero-slider-label {
  font-size: 13px !important;
  color: var(--text) !important;
  margin-bottom: 10px !important;
  font-weight: 600 !important;
}
.hero-slider-badge {
  background: var(--orange) !important;
  color: #fff !important;
  font-size: 10px !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  margin-right: 6px !important;
}
.hero-arr {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.hero-arr:hover { background: var(--orange) !important; color: #fff !important; }
.hero-progress { background: var(--border) !important; }
.hero-progress-bar { background: var(--orange) !important; }
.hero-dots .dot { background: var(--border) !important; }
.hero-dots .dot.active { background: var(--orange) !important; }
/* Bracket deco: hidden */
.slider-bracket, .slider-glow { display: none !important; }

/* Hero text */
.hero-title-line  { color: var(--text) !important; font-size: 46px !important; }
.hero-title-accent{ color: var(--orange) !important; font-size: 46px !important; }
.hero-subtitle    { color: #4a3e32 !important; }
.hero-pill { background: #fff !important; color: #222 !important; border: 1px solid var(--border) !important; }
.hero-pill-gold   { color: var(--gold) !important; border-color: var(--gold) !important; }
.hero-pill-green  { color: var(--green) !important; border-color: var(--green) !important; }
.hero-pill-cyan   { color: #0077a8 !important; border-color: rgba(0,119,168,0.6) !important; background: rgba(0,119,168,0.07) !important; }
.hf-pill { background: #fff !important; color: #222 !important; border: 1px solid #ddd !important; }
.hf-icon { color: var(--orange) !important; }
/* Platform badges — light mode */
.hero-plat-quotex { color: #e65100 !important; border-color: rgba(230,81,0,0.5) !important; background: rgba(230,81,0,0.07) !important; }
.hero-plat-exnova { color: #0077a8 !important; border-color: rgba(0,119,168,0.5) !important; background: rgba(0,119,168,0.07) !important; }
.hero-plat-pocket { color: #b01297 !important; border-color: rgba(176,18,151,0.5) !important; background: rgba(176,18,151,0.07) !important; }
.hero-plat-sep    { color: #bbb !important; }
.hero-cta-row { justify-content: center !important; margin-top: 24px !important; }

/* --- Ticker bar --- */
.ticker-bar {
  background: var(--bg3) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.ticker-bar::before { background: linear-gradient(90deg, var(--bg3), transparent) !important; }
.ticker-bar::after  { background: linear-gradient(-90deg, var(--bg3), transparent) !important; }
.ticker-item { color: var(--text) !important; border-right-color: var(--border) !important; }
.tick-up   { color: var(--green) !important; }
.tick-down { color: var(--red) !important; }

/* --- AI Engine Section --- */
.ai-engine-section {
  padding: 70px 0 !important;
  background: var(--bg2) !important;
}
.ai-section-eyebrow { color: var(--orange) !important; }
.bot-scene-wrap {
  border-color: var(--border) !important;
  background: #fff !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.07) !important;
}
.ai-stat-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
.ai-stat-num { color: var(--orange) !important; }
.ai-stat-label { color: var(--muted) !important; }

/* --- Features Section --- */
.features-section {
  padding: 70px 0 !important;
  background: var(--bg) !important;
}
.feature-card-pro {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05) !important;
  color: var(--text) !important;
}
.feature-card-pro h3 { color: var(--text) !important; }
.feature-card-pro p  { color: var(--muted) !important; }
.feature-card-pro::before { background: linear-gradient(90deg, transparent, var(--orange), transparent) !important; }
.feature-card-pro:hover {
  border-color: var(--orange) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}
.fc-icon { background: rgba(224,102,0,0.12) !important; }

/* --- Pricing Section --- */
.pricing-section {
  background: var(--bg2) !important;
}
.price-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
  color: var(--text) !important;
}
.price-card-popular {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 1px var(--orange) inset, 0 0 25px rgba(224,102,0,0.08) !important;
}
.price-card-badge { background: var(--orange) !important; color: #fff !important; }
.price-card-name   { color: var(--text) !important; }
.price-card-desc   { color: var(--muted) !important; }
.price-card-amount { color: var(--orange) !important; }
.price-card-inr    { color: var(--gold) !important; }
.price-card-features li { color: var(--muted) !important; }

/* --- Blog/FAQ sections --- */
.blog-section, .faq-section {
  background: var(--bg) !important;
}
.faq-inner { background: #fff !important; border: 1px solid var(--border) !important; }

/* --- Footer --- */
.pro-footer {
  background: #2c1d0e !important;
  border-top: 1px solid #5a3d1e !important;
}
.pro-footer .footer-brand p, .footer-links a, .footer-bottom, .footer-links h4 {
  color: #c9a984 !important;
}
.footer-links a:hover { color: var(--orange) !important; }
.footer-bottom a { color: var(--orange) !important; }

/* --- Section Headers --- */
.section-label {
  background: rgba(224,102,0,0.12) !important;
  color: var(--orange) !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
}
.section-header h2 { color: var(--text) !important; }
.text-cyan { color: var(--orange) !important; }

/* --- Exnova Section --- */
.exnova-section {
  background: linear-gradient(160deg, #fff3e0, #fce5cc) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}
.exnova-animation-visual {
  box-shadow: 0 12px 40px rgba(224,102,0,0.10) !important;
}

/* --- Stats Row --- */
.ai-stats-row {
  display: flex !important;
  justify-content: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  margin-top: 45px !important;
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .hero-slider-box { height: 380px !important; }
  .hero-title-line, .hero-title-accent { font-size: 36px !important; }
  .hero-right-slider { max-width: 100% !important; }
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .pricing-grid  { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid   { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
}
@media (max-width: 600px) {
  .hero-slider-box { height: 260px !important; }
  .hero-title-line, .hero-title-accent { font-size: 28px !important; }
  .features-grid { grid-template-columns: 1fr !important; }
  .pricing-grid  { grid-template-columns: 1fr !important; }
  .footer-grid   { grid-template-columns: 1fr !important; }
  .section-header h2 { font-size: 26px !important; }
}

/* =============================================================
   YOUTUBE WALKTHROUGH SECTION
   ============================================================= */
.yt-section {
  position: relative;
  background: linear-gradient(135deg, #0a0008 0%, #130010 45%, #080510 100%);
  padding: 90px 0;
  overflow: hidden;
}
.yt-section::before {
  content: '';
  position: absolute;
  top: -150px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 600px;
  background: radial-gradient(ellipse, rgba(255,0,0,0.1) 0%, transparent 65%);
  pointer-events: none;
}
.yt-particles { position: absolute; inset: 0; pointer-events: none; }
.yt-particle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,60,60,0.5); animation: ytFloat 7s ease-in-out infinite; }
.yt-p1 { top:12%; left:12%; animation-delay:0s; }
.yt-p2 { top:28%; left:88%; animation-delay:1.2s; animation-duration:8s; }
.yt-p3 { top:65%; left:8%; animation-delay:2.4s; animation-duration:9s; }
.yt-p4 { top:80%; left:75%; animation-delay:0.6s; animation-duration:6s; }
.yt-p5 { top:45%; left:55%; animation-delay:3s; width:7px; height:7px; }
@keyframes ytFloat { 0%,100%{transform:translateY(0) scale(1);opacity:.5;} 50%{transform:translateY(-22px) scale(1.6);opacity:1;} }

.yt-wrap { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }

.yt-eyebrow { display:inline-flex; align-items:center; gap:8px; color:#ff7070; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:18px; }
.yt-dot { width:9px; height:9px; border-radius:50%; background:#ff0000; box-shadow:0 0 8px #ff0000; animation:ytDotPulse 1.5s infinite; }
@keyframes ytDotPulse { 0%,100%{box-shadow:0 0 8px #ff0000;} 50%{box-shadow:0 0 22px #ff0000,0 0 44px rgba(255,0,0,0.3);} }

.yt-heading { font-size:42px; font-weight:800; color:#fff; line-height:1.2; margin:0 0 18px; }
.yt-heading .yt-red { color:#ff4444; text-shadow:0 0 30px rgba(255,68,68,0.55); }
.yt-subtext { color:rgba(255,255,255,0.6); font-size:16px; line-height:1.75; margin-bottom:32px; max-width:450px; }

/* Big YouTube Watch Button */
.yt-watch-btn {
  display:inline-flex; align-items:center; gap:16px;
  background:linear-gradient(135deg,#b80000 0%,#ff0000 50%,#cc0000 100%);
  color:#fff !important; text-decoration:none !important;
  padding:18px 28px; border-radius:14px; font-weight:700;
  box-shadow:0 8px 36px rgba(255,0,0,0.5),0 2px 8px rgba(0,0,0,0.3);
  transition:all .3s ease; position:relative; overflow:hidden;
  margin-bottom:30px; animation:ytBtnGlow 3s ease-in-out infinite;
}
@keyframes ytBtnGlow { 0%,100%{box-shadow:0 8px 36px rgba(255,0,0,0.5),0 2px 8px rgba(0,0,0,0.3);} 50%{box-shadow:0 8px 56px rgba(255,0,0,0.75),0 2px 16px rgba(0,0,0,0.4),inset 0 0 18px rgba(255,255,255,0.08);} }
.yt-watch-btn::before { content:''; position:absolute; top:-50%; left:-60%; width:35%; height:200%; background:rgba(255,255,255,0.14); transform:skewX(-20deg); animation:ytShimmer 3.5s infinite; }
@keyframes ytShimmer { 0%{left:-60%;} 100%{left:135%;} }
.yt-watch-btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 16px 60px rgba(255,0,0,0.7),0 4px 16px rgba(0,0,0,0.4) !important; }
.yt-btn-icon { background:rgba(0,0,0,0.2); border-radius:8px; padding:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.yt-btn-text { display:flex; flex-direction:column; gap:3px; }
.yt-btn-main { font-size:15px; font-weight:800; line-height:1.2; }
.yt-btn-sub { font-size:12px; font-weight:500; opacity:.85; }
.yt-btn-arrow { font-size:20px; margin-left:auto; animation:ytArr 1s infinite ease-in-out; }
@keyframes ytArr { 0%,100%{transform:translateX(0);} 50%{transform:translateX(7px);} }

.yt-preview-stats { display:flex; gap:28px; flex-wrap:wrap; }
.yt-pstat { display:flex; flex-direction:column; gap:2px; }
.yt-pstat strong { font-size:22px; font-weight:800; color:#fff; }
.yt-pstat span { font-size:11px; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:1px; }

/* Animated card */
.yt-anim-wrap { position:relative; display:flex; justify-content:center; align-items:center; }
.yt-glow-ring { position:absolute; border-radius:16px; animation:ytRingPulse 3s ease-in-out infinite; pointer-events:none; }
.yt-glow-ring-1 { width:100%; height:100%; border:1px solid rgba(255,0,0,0.14); animation-delay:0s; }
.yt-glow-ring-2 { width:calc(100% + 24px); height:calc(100% + 24px); border:1px solid rgba(255,0,0,0.07); animation-delay:1s; }
@keyframes ytRingPulse { 0%,100%{opacity:.5;transform:scale(1);} 50%{opacity:1;transform:scale(1.02);} }

.yt-video-preview-card {
  background:#0d1117; border-radius:16px;
  border:1.5px solid rgba(255,0,0,0.22); overflow:hidden; width:100%; max-width:480px;
  box-shadow:0 20px 60px rgba(0,0,0,0.75),0 0 40px rgba(255,0,0,0.08);
  animation:ytCardFloat 4.5s ease-in-out infinite;
}
@keyframes ytCardFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
.yt-card-header { display:flex; align-items:center; gap:8px; background:#161b22; padding:10px 14px; border-bottom:1px solid rgba(255,0,0,0.1); }
.yt-card-dots { display:flex; gap:6px; }
.yt-card-dots span { width:10px; height:10px; border-radius:50%; }
.yt-card-title-bar { font-family:monospace; font-size:11px; color:#8b949e; margin-left:6px; }
.yt-live-badge { margin-left:auto; font-size:10px; color:#ff4444; font-weight:700; animation:ytBlink 1.5s infinite; }
@keyframes ytBlink { 0%,100%{opacity:1;} 50%{opacity:.2;} }
.yt-preview-svg { display:block; width:100%; }
.yt-card-footer { display:flex; align-items:center; gap:10px; background:#161b22; padding:10px 14px; border-top:1px solid rgba(255,0,0,0.1); font-size:12px; color:#8b949e; }
.yt-yt-icon { display:flex; align-items:center; flex-shrink:0; }
.yt-watch-now { margin-left:auto; color:#ff4444 !important; font-weight:700; font-size:12px; text-decoration:none; transition:color .2s; }
.yt-watch-now:hover { color:#ff0000 !important; }

@media (max-width:960px) { .yt-wrap { grid-template-columns:1fr; gap:40px; } .yt-heading { font-size:32px; } }
@media (max-width:600px) { .yt-heading { font-size:26px; } .yt-watch-btn { padding:14px 18px; } .yt-anim-wrap { display:none; } }

/* =============================================================
   MQL5 MARKETPLACE SECTION
   ============================================================= */
.mql5-section {
  position:relative; background:linear-gradient(135deg,#020d1a 0%,#031525 55%,#020a14 100%);
  padding:90px 0; overflow:hidden;
}
.mql5-section::before {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:700px; height:700px;
  background:radial-gradient(ellipse,rgba(0,180,216,0.08) 0%,transparent 68%);
  pointer-events:none;
}
.mql5-bg-fx { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.mql5-blob { position:absolute; border-radius:50%; filter:blur(60px); animation:mql5BlobFloat 9s ease-in-out infinite; }
.mql5-blob-1 { width:320px; height:320px; background:rgba(0,180,216,0.07); top:-100px; right:8%; animation-delay:0s; }
.mql5-blob-2 { width:260px; height:260px; background:rgba(0,230,118,0.05); bottom:-80px; left:12%; animation-delay:3.5s; }
@keyframes mql5BlobFloat { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(18px,-18px) scale(1.1);} }

.mql5-section-label { display:inline-block; background:rgba(0,180,216,0.1) !important; color:#00b4d8 !important; padding:5px 16px; border-radius:20px; font-size:11px !important; font-weight:700; letter-spacing:2px; border:1px solid rgba(0,180,216,0.2); margin-bottom:0; }
.mql5-heading { font-size:42px; font-weight:800; color:#fff !important; margin:18px 0 12px; }
.mql5-accent { color:#00b4d8 !important; text-shadow:0 0 30px rgba(0,180,216,0.4); }
.mql5-desc { color:rgba(255,255,255,0.55) !important; }

.mql5-showcase { display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center; }
.mql5-showcase-svg { display:block; width:100%; border-radius:16px; border:1px solid rgba(0,180,216,0.15); box-shadow:0 20px 60px rgba(0,0,0,0.65),0 0 40px rgba(0,180,216,0.07); animation:mql5Float 5s ease-in-out infinite; }
@keyframes mql5Float { 0%,100%{transform:translateY(0);box-shadow:0 20px 60px rgba(0,0,0,0.65),0 0 40px rgba(0,180,216,0.07);} 50%{transform:translateY(-10px);box-shadow:0 30px 80px rgba(0,0,0,0.75),0 0 60px rgba(0,180,216,0.14);} }

.mql5-features-side { display:flex; flex-direction:column; gap:22px; }
.mql5-feature-item { display:flex; align-items:flex-start; gap:18px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:22px; transition:all .3s ease; }
.mql5-feature-item:hover { background:rgba(0,180,216,0.05); border-color:rgba(0,180,216,0.22); transform:translateX(6px); }
.mql5-feat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.mql5-feature-item h4 { font-size:15px; font-weight:700; color:#fff; margin:0 0 7px; }
.mql5-feature-item p { font-size:14px; color:rgba(255,255,255,0.52); margin:0; line-height:1.62; }

.mql5-cta-btn {
  display:inline-flex; align-items:center; gap:16px;
  background:linear-gradient(135deg,#005f88 0%,#00b4d8 50%,#009abc 100%);
  color:#fff !important; text-decoration:none !important;
  padding:20px 36px; border-radius:16px; font-weight:700;
  box-shadow:0 10px 40px rgba(0,180,216,0.42),0 2px 8px rgba(0,0,0,0.3);
  transition:all .3s ease; position:relative; overflow:hidden;
  animation:mql5BtnGlow 4s ease-in-out infinite;
}
@keyframes mql5BtnGlow { 0%,100%{box-shadow:0 10px 40px rgba(0,180,216,0.42),0 2px 8px rgba(0,0,0,0.3);} 50%{box-shadow:0 10px 64px rgba(0,180,216,0.7),0 2px 16px rgba(0,0,0,0.4),inset 0 0 20px rgba(255,255,255,0.06);} }
.mql5-cta-btn::before { content:''; position:absolute; top:-50%; left:-60%; width:35%; height:200%; background:rgba(255,255,255,0.1); transform:skewX(-20deg); animation:mql5Shimmer 4.5s infinite; }
@keyframes mql5Shimmer { 0%{left:-60%;} 100%{left:135%;} }
.mql5-cta-btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 16px 70px rgba(0,180,216,0.68),0 4px 16px rgba(0,0,0,0.4) !important; }
.mql5-cta-icon { font-size:28px; flex-shrink:0; }
.mql5-cta-text { display:flex; flex-direction:column; gap:3px; text-align:left; }
.mql5-cta-main { font-size:16px; font-weight:800; line-height:1.2; }
.mql5-cta-sub { font-size:11px; opacity:.7; font-weight:400; }
.mql5-cta-arrow { font-size:22px; margin-left:8px; animation:mql5Arr 1.2s infinite ease-in-out; }
@keyframes mql5Arr { 0%,100%{transform:translateX(0);} 50%{transform:translateX(9px);} }

/* === Exnova showcase grid  responsive === */
.exnova-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 60px;
}
@media (max-width: 960px) {
  .exnova-showcase-grid { grid-template-columns: 1fr; gap: 36px; margin-bottom: 40px; }
}
@media (max-width: 600px) {
  .exnova-showcase-grid { gap: 24px; margin-bottom: 32px; }
}

/* === Pocket Option showcase grid — responsive === */
.pocket-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 54px;
}
@media (max-width: 960px) {
  .pocket-showcase-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .pocket-showcase-grid { gap: 24px; margin-bottom: 36px; }
}

/* === MQL5 new layout: 2-column top + 2x2 feature grid below === */
.mql5-showcase-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  margin-bottom: 36px;
}
.mql5-dev-computer {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 48px rgba(0,180,216,0.1);
  animation: mql5Float 5s ease-in-out infinite;
}
.mql5-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 4px;
}
@media (max-width: 1080px) {
  .mql5-showcase-top { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 960px) {
  .mql5-showcase-top { grid-template-columns: 1fr; gap: 32px; }
  .mql5-features-grid { grid-template-columns: 1fr; }
  .mql5-heading { font-size: 32px; }
}
@media (max-width: 600px) {
  .mql5-heading { font-size: 26px; }
  .mql5-cta-btn { flex-direction: column; text-align: center; padding: 18px 24px; }
  .mql5-features-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* =============================================================
   AI CHATBOX WIDGET
   ============================================================= */
.qp-chatbox { position:fixed; top:24px; right:24px; z-index:9999; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }

.qp-chat-toggle-btn {
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#1565c0,#1e88e5);
  color:#fff; border:none; border-radius:50px; padding:14px 22px;
  cursor:pointer; font-size:14px; font-weight:700;
  box-shadow:0 8px 30px rgba(21,101,192,0.48),0 2px 8px rgba(0,0,0,0.2);
  transition:all .3s ease; position:relative;
  animation:qpToggleGlow 3s ease-in-out infinite;
}
@keyframes qpToggleGlow { 0%,100%{box-shadow:0 8px 30px rgba(21,101,192,0.48),0 2px 8px rgba(0,0,0,0.2);} 50%{box-shadow:0 8px 52px rgba(21,101,192,0.75),0 2px 16px rgba(0,0,0,0.3);} }
.qp-chat-toggle-btn:hover { transform:translateY(-2px) scale(1.04); }
.qp-chat-toggle-btn.active { background:linear-gradient(135deg,#0d47a1,#1565c0); }
.qp-toggle-icon { position:relative; display:flex; align-items:center; }
.qp-chat-pulse { position:absolute; top:-4px; right:-4px; width:10px; height:10px; background:#00e676; border-radius:50%; border:2px solid #fff; animation:qpDotPulse 2s ease-in-out infinite; }
@keyframes qpDotPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.5);box-shadow:0 0 8px #00e676;} }
.qp-toggle-label { font-size:13px; font-weight:700; }

.qp-chat-window {
  position:absolute; top:68px; right:0; width:360px;
  background:#fff; border-radius:20px;
  box-shadow:0 22px 80px rgba(0,0,0,0.22),0 4px 20px rgba(0,0,0,0.1);
  overflow:hidden; flex-direction:column; max-height:530px;
  border:1px solid rgba(0,0,0,0.07); display:none;
}
.qp-chat-window.open { display:flex; animation:qpSlideIn .3s ease; }
@keyframes qpSlideIn { from{opacity:0;transform:translateY(20px) scale(.95);} to{opacity:1;transform:translateY(0) scale(1);} }

.qp-chat-head { display:flex; align-items:center; gap:12px; padding:16px 18px; background:linear-gradient(135deg,#1565c0,#1e88e5); color:#fff; }
.qp-head-avatar { width:38px; height:38px; background:rgba(255,255,255,0.18); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.qp-head-info { display:flex; flex-direction:column; gap:2px; flex:1; }
.qp-head-name { font-size:13px; font-weight:700; line-height:1.2; }
.qp-head-status { font-size:11px; opacity:.88; display:flex; align-items:center; gap:5px; }
.qp-online-dot { width:7px; height:7px; background:#00e676; border-radius:50%; animation:qpDotPulse 2s infinite; }
.qp-chat-close { background:none; border:none; color:rgba(255,255,255,.78); cursor:pointer; padding:4px; border-radius:6px; display:flex; align-items:center; transition:all .2s; }
.qp-chat-close:hover { background:rgba(255,255,255,.15); color:#fff; }

.qp-chat-msgs { flex:1; overflow-y:auto; padding:16px 12px; background:#f7f8fa; display:flex; flex-direction:column; gap:12px; min-height:180px; max-height:260px; scroll-behavior:smooth; }
.qp-chat-msgs::-webkit-scrollbar { width:4px; }
.qp-chat-msgs::-webkit-scrollbar-thumb { background:#ddd; border-radius:4px; }

.qp-msg { display:flex; gap:8px; align-items:flex-end; animation:qpMsgIn .25s ease; }
@keyframes qpMsgIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
.qp-msg-bot { flex-direction:row; }
.qp-msg-user { flex-direction:row-reverse; }
.qp-msg-avatar { font-size:18px; flex-shrink:0; line-height:1; }
.qp-msg-bubble { max-width:83%; padding:10px 14px; border-radius:16px; font-size:13px; line-height:1.55; }
.qp-msg-bot .qp-msg-bubble { background:#fff; color:#1a1a2e; border-bottom-left-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.06); }
.qp-msg-bot .qp-msg-bubble a { color:#1565c0; font-weight:600; }
.qp-msg-user .qp-msg-bubble { background:linear-gradient(135deg,#1565c0,#1e88e5); color:#fff; border-bottom-right-radius:4px; box-shadow:0 2px 8px rgba(21,101,192,0.28); }

.qp-typing-dots { display:flex; gap:4px; align-items:center; height:16px; }
.qp-typing-dots span { width:7px; height:7px; background:#ccc; border-radius:50%; animation:qpBounce 1.2s infinite; }
.qp-typing-dots span:nth-child(2) { animation-delay:.2s; }
.qp-typing-dots span:nth-child(3) { animation-delay:.4s; }
@keyframes qpBounce { 0%,60%,100%{transform:translateY(0);} 30%{transform:translateY(-7px);} }

.qp-quick-btns { display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; background:#f7f8fa; border-top:1px solid rgba(0,0,0,0.06); }
.qp-quick-btns button { background:#fff; border:1.5px solid rgba(21,101,192,0.35); color:#1565c0; border-radius:20px; padding:5px 11px; font-size:11px; font-weight:600; cursor:pointer; transition:all .2s; }
.qp-quick-btns button:hover { background:#1565c0; color:#fff; border-color:#1565c0; }

.qp-chat-input-bar { display:flex; gap:8px; padding:12px 12px; background:#fff; border-top:1px solid rgba(0,0,0,0.06); align-items:center; }
.qp-chat-input { flex:1; border:1.5px solid #e5e7eb; border-radius:24px; padding:8px 16px; font-size:13px; outline:none; transition:border-color .2s; background:#f7f8fa; }
.qp-chat-input:focus { border-color:#1565c0; background:#fff; }
.qp-send-btn { background:linear-gradient(135deg,#1565c0,#1e88e5); border:none; border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; flex-shrink:0; transition:all .2s; }
.qp-send-btn:hover { transform:scale(1.12); box-shadow:0 4px 14px rgba(21,101,192,0.45); }

.qp-wa-btn-inline { display:inline-flex; align-items:center; background:#25D366; color:#fff !important; text-decoration:none; padding:8px 16px; border-radius:8px; font-size:12px; font-weight:600; margin-top:8px; transition:all .2s; }
.qp-wa-btn-inline:hover { background:#1da851; transform:translateY(-1px); }

@media (max-width:600px) { .qp-chat-window { width:94vw; right:-4px; top:62px; } .qp-chatbox { top:16px; right:12px; } }