/* v25 isolated styles — scoped to the new demo teaser */
.demo-teaser-v25{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start}
@media (max-width:900px){.demo-teaser-v25{grid-template-columns:1fr}}

.hero-info{margin-top:-25px}
.hero-info .badge{margin-bottom:22px}
.hero-info h2{margin:0 0 10px}
.hero-info .sub{margin-top:0}

.preview-v25{background:linear-gradient(180deg,#0a0f14,#0e1620);
  border-radius:14px;border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden;min-height:480px}
.preview-v25::before{content:"";position:absolute;inset:1px;
  background:
    repeating-linear-gradient(90deg, rgba(0,224,255,.06), rgba(0,224,255,.06) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(0,224,255,.06) 12px, rgba(0,224,255,.06) 13px);
  opacity:.22;pointer-events:none}
.preview-shell{position:absolute;inset:12px;display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto 1fr;gap:12px}

/* left column */
.preview-shell .mini-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.preview-shell .mini-card{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px;background:linear-gradient(180deg,#0b121a,#0e1620)}
.preview-shell .mini-title{color:var(--muted);font-weight:600;font-size:11px}
.preview-shell .mini-val{font-family:"Orbitron",sans-serif;font-size:14px;margin-top:4px}

/* symbols table with guaranteed bottom border */
.mini-table-wrap-v25{position:relative;overflow:visible;height:100%}
.mini-table-wrap-v25::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.18);pointer-events:none;z-index:10}
.mini-table-v25{border:1px solid rgba(255,255,255,.08);border-radius:10px;overflow:hidden;height:100%;background:linear-gradient(180deg,#0b121a,#0e1620)}
.mini-table-v25 table{width:100%;border-collapse:collapse;table-layout:fixed}
.mini-table-v25 th,.mini-table-v25 td{padding:4px 6px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid rgba(255,255,255,.08)}
.mini-table-v25 thead th{font-weight:700}
/* ensure 9 rows fit without scroll */
.mini-table-v25 tbody tr{height:22px}

/* right column */
.alerts-v25,.snapshot-v25{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px;background:linear-gradient(180deg,#0b121a,#0e1620)}
.alerts-v25 .ticker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.snapshot-v25 .row{display:flex;justify-content:space-between;font-size:11px;padding:4px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.snapshot-v25 .row:last-child{border-bottom:none}





/* --- v77c Indicators section (isolated) --- */
.tv-indicators .container{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
@media (max-width: 960px){
  .tv-indicators .container{grid-template-columns:1fr;gap:24px}
}
.tv-indicators .preview .preview-inner.tv-mock{
  border:1px solid rgba(0,255,255,.14);
  border-radius:16px;
  background:linear-gradient(180deg,#0b121a,#0e1620);
  box-shadow:0 0 60px rgba(0,255,255,.06), inset 0 0 20px rgba(0,255,255,.04);
  padding:12px;
}
.tv-indicators .preview img{display:block;width:100%;height: auto;border-radius:12px}
.tv-indicators .bullets{margin:12px 0 20px 0;padding-left:18px;color:var(--muted)}
.tv-indicators .bullets li{margin:6px 0}
/* --- end Indicators section --- */


/* --- v77c Indicators section: layout refinements --- */
.tv-indicators .hero-left{order:2}
.tv-indicators .preview{order:1}

@media (max-width: 960px){
  /* Keep natural stacking on mobile */
  .tv-indicators .hero-left,.tv-indicators .preview{order:unset}
}

/* Badge spacing to mirror demo section */
.tv-indicators .hero-left .badge{
  display:inline-block;
  margin-top:-70px;
  margin-bottom:20px;
}

/* Mockup prominence & polish */
.tv-indicators .preview .preview-inner.tv-mock{
  padding:8px; /* tighter frame */
  box-shadow:
    0 0 70px rgba(0,255,255,.08),
    inset 0 0 22px rgba(0,255,255,.05);
}
.tv-indicators .preview img{
  display:block;
  width:100%;
  max-width:92%;
  height: auto;
  margin:8px auto; /* center in frame */
  border-radius:12px;
}
/* --- end refinements --- */


/* --- v77d demo badge spacing align with indicators --- */
.demo-teaser .hero-left .badge{
  display:inline-block;
  margin-top:-70px;
  margin-bottom:20px;
}

/* --- v77d indicators preview unclipped --- */
.tv-indicators .preview{
  min-height: auto;
  overflow:visible;
}


/* --- v77d3 indicators: fix preview positioning & hide grid overlay --- */
.tv-indicators .preview::before{ display:none; }
.tv-indicators .preview .preview-inner.tv-mock{
  position: relative; /* override global absolute */
  inset: 0;           /* reset absolute offsets */
}
/* --- end fix --- */


/* --- v77d4 indicators: enlarge mockup and simplify frame --- */
/* Give the image column more space */
.tv-indicators .container{grid-template-columns:1.3fr 1fr}

/* Let the preview fill its column and center content vertically */
.tv-indicators .preview{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible; /* keep from earlier */
}

/* Flatten inner wrapper so image can take full width */
.tv-indicators .preview .preview-inner.tv-mock{
  position:relative;
  inset:auto;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

/* Make the mockup big and clean; subtle glow comes from the image itself */
.tv-indicators .preview img{
  width:100%;
  max-width:100%;
  height: auto;
  margin:0;
  border-radius:14px;
  display:block;
}
/* --- end enlarge --- */


/* --- v77d5 indicators: hero-scale image & bleed --- */
@media (min-width: 1100px){
  .tv-indicators .container{grid-template-columns:1.6fr 1fr}
  .tv-indicators .preview{margin-left:-40px}
  .tv-indicators .preview img{
    transform: scale(1.08);
    transform-origin: left center;
  }
}
@media (max-width: 1099px){
  .tv-indicators .preview{margin-left:0}
  .tv-indicators .preview img{transform:none}
}
/* --- end v77d5 --- */


/* --- v77d5 indicators: larger image with gentle bleed --- */
/* Wider image column */
.tv-indicators .container{grid-template-columns:1.6fr 1fr}

/* Desktop-only visual emphasis */
@media (min-width: 1100px){
  .tv-indicators .preview{
    margin-left:-40px;   /* slight bleed into gutter */
  }
  .tv-indicators .preview img{
    transform:scale(1.1);
    transform-origin:left center;
  }
}

/* Ensure no horizontal scroll on smaller screens */
@media (max-width: 960px){
  .tv-indicators .preview{
    margin-left:0;
  }
  .tv-indicators .preview img{
    transform:none;
  }
}
/* --- end v77d5 --- */


/* --- v77d6 indicators: hero-scale mockup --- */
.tv-indicators .container{grid-template-columns:1.8fr 1fr}

@media (min-width: 1200px){
  .tv-indicators .preview{ margin-left:-60px; }
  .tv-indicators .preview img{
    transform:scale(1.18);
    transform-origin:left center;
  }
}
@media (max-width: 960px){
  .tv-indicators .preview{ margin-left:0; }
  .tv-indicators .preview img{ transform:none; }
}
/* --- end v77d6 --- */


/* --- v77d6 indicators: hero-scale without new image --- */
@media (min-width: 1200px){
  /* Push image further out of the grid padding */
  .tv-indicators .preview{
    margin-left:-80px;
  }
  /* Make the mockup visually larger while keeping it crisp */
  .tv-indicators .preview img{
    max-width:none;        /* remove column cap */
    width:clamp(820px, 58vw, 1100px);
    transform:scale(1.08);
    transform-origin:left center;
  }
}

/* Keep medium screens tidy */
@media (min-width: 960px) and (max-width: 1199px){
  .tv-indicators .preview{
    margin-left:-40px;
  }
  .tv-indicators .preview img{
    max-width:none;
    width:clamp(720px, 52vw, 980px);
    transform:scale(1.04);
  }
}

/* Mobile: natural flow, no bleed */
@media (max-width: 959px){
  .tv-indicators .preview{ margin-left:0; }
  .tv-indicators .preview img{
    width:100%;
    max-width:100%;
    transform:none;
  }
}
/* --- end v77d6 --- */


/* --- v77d7 indicators: balanced proportions --- */
/* Slightly narrower image column for balance */
.tv-indicators .container{grid-template-columns:1.45fr 1fr}

/* Desktop fine-tuning */
@media (min-width: 1100px){
  .tv-indicators .preview{ margin-left:-40px; }
  .tv-indicators .preview img{
    transform:scale(1.03);
    transform-origin:left center;
    max-width:900px;                  /* hard cap for cleanliness */
    width:clamp(720px, 50vw, 900px);  /* responsive range */
  }
}

/* Medium screens: even gentler */
@media (min-width: 960px) and (max-width: 1099px){
  .tv-indicators .preview{ margin-left:-24px; }
  .tv-indicators .preview img{
    transform:scale(1.01);
    width:clamp(660px, 48vw, 820px);
    max-width:820px;
  }
}
/* --- end v77d7 --- */


/* --- v77d8 indicators: match demo proportions & card style --- */
/* Bring layout back closer to demo balance */
.tv-indicators .container{grid-template-columns:1.25fr 1fr}

/* Remove desktop bleed and heavy scaling */
.tv-indicators .preview{ margin-left:0; }
.tv-indicators .preview img{ transform:none; }

/* Reintroduce a clean card like the demo, but keep unclipped */
.tv-indicators .preview{
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.tv-indicators .preview .preview-inner.tv-mock{
  position:relative;
  inset:auto;
  width:clamp(680px, 52vw, 800px);   /* consistent with demo feel */
  max-width:100%;
  padding:12px 12px 14px 12px;
  border:1px solid rgba(0,255,255,.14);
  border-radius:18px;
  background:linear-gradient(180deg,#0b121a,#0e1620);
  box-shadow:0 8px 40px rgba(0,0,0,.45), 0 0 60px rgba(0,255,255,.06), inset 0 0 18px rgba(0,255,255,.04);
}

.tv-indicators .preview img{
  width:100%;
  max-width:100%;
  height: auto;
  border-radius:12px;
  margin:0;
}

/* Keep mobile stacked and full width */
@media (max-width: 960px){
  .tv-indicators .container{grid-template-columns:1fr;}
  .tv-indicators .preview .preview-inner.tv-mock{ width:100%; }
}
/* --- end v77d8 --- */


/* --- v77d9 indicators: remove empty card space & center image --- */
.tv-indicators .container{grid-template-columns:1.25fr 1fr}

.tv-indicators .preview{
  display:flex;
  align-items:center;
  justify-content:center;   /* center content horizontally */
  overflow:visible;
  margin-left:0;            /* no bleed */
}

/* Nuke the big card styling so only the image shows */
.tv-indicators .preview .preview-inner.tv-mock{
  width:auto;
  max-width:100%;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

/* Make the image the hero inside the column */
.tv-indicators .preview img{
  display:block;
  width:min(840px, 100%);
  height: auto;
  margin:0 auto;
  transform:none;
  border-radius:14px;
}

/* Keep mobile full-width */
@media (max-width: 960px){
  .tv-indicators .preview img{ width:100%; }
}
/* --- end v77d9 --- */


/* --- v77d10 indicators: final image fit caps --- */
.tv-indicators .preview img{
  width:100%;
  max-width:880px;   /* align with demo-like footprint */
}
@media (min-width: 1400px){
  .tv-indicators .preview img{ max-width:920px; }
}
/* --- end v77d10 --- */


/* --- v77d11 indicators: final fit for new mockup --- */
.tv-indicators .container{grid-template-columns:1.25fr 1fr}
.tv-indicators .preview{display:flex;align-items:center;justify-content:center;margin-left:0;overflow:visible}
.tv-indicators .preview .preview-inner.tv-mock{position:relative;inset:auto;padding:0;border:none;background:transparent;box-shadow:none;width:auto;max-width:100%}
.tv-indicators .preview img{display:block;width:100%;max-width:920px;height: auto;margin:0 auto;transform:none;border-radius:14px}
@media (max-width: 960px){.tv-indicators .preview img{max-width:100%}}
/* --- end v77d11 --- */


/* --- v77d12 indicators: larger visual without layout change --- */
/* Keep the existing 1.25 / 1 grid (text width unchanged) */
.tv-indicators .container{grid-template-columns:1.25fr 1fr}

/* Wrapper acts as a safe viewport for zoom; no overlap with text */
.tv-indicators .preview{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:visible;
}

/* Fixed responsive frame that centers left, enlarging content inside */
@media (min-width: 1100px){
  .tv-indicators .preview .preview-inner.tv-mock{
    width:clamp(900px, 60vw, 1040px);
    max-width:100%;
    overflow:hidden;
    border-radius:16px;
    margin-left:-20px; /* bias growth to the left, away from text */
  }
  .tv-indicators .preview img{
    max-width:none;     /* allow scaling beyond intrinsic size */
    width:100%;
    transform:scale(1.18) translateX(-3%);
    transform-origin:left center;
  }
}

/* Medium screens: milder zoom */
@media (min-width: 960px) and (max-width: 1099px){
  .tv-indicators .preview .preview-inner.tv-mock{
    width:clamp(820px, 56vw, 940px);
    overflow:hidden;
    border-radius:16px;
    margin-left:-12px;
  }
  .tv-indicators .preview img{
    max-width:none;
    width:100%;
    transform:scale(1.12) translateX(-2%);
    transform-origin:left center;
  }
}

/* Mobile unchanged: full width, no zoom */
@media (max-width: 959px){
  .tv-indicators .preview .preview-inner.tv-mock{
    width:100%;
    margin-left:0;
    overflow:visible;
    border-radius:14px;
  }
  .tv-indicators .preview img{
    width:100%;
    max-width:100%;
    transform:none;
  }
}
/* --- end v77d12 --- */


/* --- v77d13 indicators: lock text column; zoom image within its own column --- */
/* Do NOT change the grid anymore; preserve text width exactly */
.tv-indicators .container{grid-template-columns:1.25fr 1fr}

/* Column wrapper stays within its grid; no bleed */
.tv-indicators .preview{
  margin-left:0;
  overflow:hidden;            /* clip zoom so it never intrudes on text */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* The inner frame must never exceed its column width */
.tv-indicators .preview .preview-inner.tv-mock{
  width:100%;                 /* fill column only */
  max-width:100%;
  margin:0;
  border-radius:16px;
  overflow:hidden;            /* crop zoomed image cleanly */
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

/* Zoom/crop the image INSIDE the column without changing layout */
@media (min-width: 1100px){
  .tv-indicators .preview img{
    width:110%;               /* slight oversize so crop looks intentional */
    max-width:none;
    transform:scale(1.10) translateX(-4%);
    transform-origin:left center;
  }
}
@media (min-width: 960px) and (max-width: 1099px){
  .tv-indicators .preview img{
    width:108%;
    max-width:none;
    transform:scale(1.06) translateX(-3%);
  }
}
@media (max-width: 959px){
  .tv-indicators .preview img{
    width:100%;
    max-width:100%;
    transform:none;
  }
}
/* --- end v77d13 --- */


/* --- v77d13-fullwidth: Indicators image fills left column, aligned to grid --- */
.tv-indicators .container{ grid-template-columns: 1.25fr 1fr; } /* preserve text */
.tv-indicators .preview{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin-left:0;
  width:100%;
  overflow:visible;
}
.tv-indicators .preview .preview-inner.tv-mock{
  /* Fill the entire left column like the demo card */
  width:100%;
  max-width:100%;
  padding:12px 12px 14px;
  border-radius:18px;
  background:linear-gradient(180deg,#0b121a,#0e1620);
  border:1px solid rgba(0,255,255,.14);
  box-shadow:0 8px 40px rgba(0,0,0,.45), 0 0 60px rgba(0,255,255,.06), inset 0 0 18px rgba(0,255,255,.04);
}
.tv-indicators .preview img{
  display:block;
  width:100%;
  max-width:100%;
  height: auto;
  border-radius:12px;
  transform:none;
}
@media (max-width: 960px){
  .tv-indicators .preview, .tv-indicators .preview .preview-inner.tv-mock{ width:100%; }
}
/* --- end v77d13-fullwidth --- */


/* --- v77d13-fullbleed: image fills the card completely --- */
.tv-indicators .preview .preview-inner.tv-mock{
  width:100%;
  max-width:100%;
  padding:0;                 /* remove inner padding so image can touch edges */
  border-radius:18px;
  overflow:hidden;
  /* keep the card styling from fullwidth build */
  background:linear-gradient(180deg,#0b121a,#0e1620);
  border:1px solid rgba(0,255,255,.14);
  box-shadow:0 8px 40px rgba(0,0,0,.45), 0 0 60px rgba(0,255,255,.06), inset 0 0 18px rgba(0,255,255,.04);
  aspect-ratio: 16 / 9;      /* maintain cinematic shape while allowing height to grow */
}
.tv-indicators .preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;          /* fill the card, no letterboxing */
  border-radius:12px;
}
/* Allow taller than text; layout naturally handles it */
@media (max-width: 960px){
  .tv-indicators .preview .preview-inner.tv-mock{ aspect-ratio:auto; }
}
/* --- end v77d13-fullbleed --- */


/* --- v77d13-fullfit2: absolute centering + contain inside card --- */
.tv-indicators .preview .preview-inner.tv-mock{
  position: relative;
}
.tv-indicators .preview .preview-inner.tv-mock img{
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}
/* --- end v77d13-fullfit2 --- */


/* --- v77d13-finalfit: match container to new mockup ratio and fill it edge-to-edge --- */
.tv-indicators .preview .preview-inner.tv-mock {
  aspect-ratio: 1536 / 1024;   /* set to exact image ratio */
  padding: 0;
  overflow: hidden;
}
.tv-indicators .preview .preview-inner.tv-mock img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  margin: 0;
  position: static;
}
/* --- end v77d13-finalfit --- */


/* --- v77d13-finalfit-spacingfix: match 'Coming Soon' pill spacing --- */
.see-zyniq .cta-btn {
  margin-top: 24px !important; /* increased to visually match TradingView section */
}
/* --- end v77d13-finalfit-spacingfix --- */


/* --- v77d13-finalfit-spacingfix2: refined pill spacing to match TradingView section exactly --- */
.see-zyniq .cta-btn {
  margin-top: 34px !important; /* increased by 10px from previous to align visually */
}
/* --- end v77d13-finalfit-spacingfix2 --- */


/* --- v77d13-pillmatch: make demo pill spacing match TradingView --- */
/* TradingView pill uses .tv-indicators .hero-left .badge with -70px / 20px.
   Apply the same to the demo ("See ZynIQ in Action") section. */
.demo-teaser .hero-left .badge{
  margin-top: -70px !important;
  margin-bottom: 20px !important;
  display: inline-block;
}
/* --- end v77d13-pillmatch --- */


/* --- v77d13-pillmatch2: fine-tuned downward adjustment for demo pill --- */
.demo-teaser .hero-left .badge{
  margin-top: -60px !important; /* lowered slightly more for perfect alignment */
  margin-bottom: 20px !important;
  display: inline-block;
}
/* --- end v77d13-pillmatch2 --- */


/* --- v77d13-pillmatch3: micro-adjustment for final perfect alignment --- */
.demo-teaser .hero-left .badge{
  margin-top: -54px !important; /* lowered fractionally for exact match */
  margin-bottom: 20px !important;
  display: inline-block;
}
/* --- end v77d13-pillmatch3 --- */


/* --- v77d13-pillmatch4: final micro-adjustment for perfect pill alignment --- */
.demo-teaser .hero-left .badge{
  margin-top: -48px !important; /* lowered slightly more for final alignment */
  margin-bottom: 20px !important;
  display: inline-block;
}
/* --- end v77d13-pillmatch4 --- */


/* --- v77d13-pillmatch5: final fine-tune for perfect visual alignment --- */
.demo-teaser .hero-left .badge{
  margin-top: -42px !important; /* lowered slightly more for exact balance */
  margin-bottom: 20px !important;
  display: inline-block;
}
/* --- end v77d13-pillmatch5 --- */


/* --- v77d13-pillmatch6: lowered by 10px more for perfect alignment --- */
.demo-teaser .hero-left .badge{
  margin-top: -32px !important; /* lowered further to match TradingView pill */
  margin-bottom: 20px !important;
  display: inline-block;
}
/* --- end v77d13-pillmatch6 --- */


/* --- v77d13-pillmatch7: enforce visible spacing for 'See ZynIQ in Action' pill --- */
section.see-zyniq .hero-left .badge {
  margin-top: 40px !important; /* positive margin ensures pill moves down visibly */
  margin-bottom: 20px !important;
  display: inline-block;
}
/* --- end v77d13-pillmatch7 --- */


/* --- v77d13-pillmatch8: force pill position --- */
body section.see-zyniq .hero-left .badge {
  margin-top: 80px !important; /* stronger downward movement */
  margin-bottom: 20px !important;
  display: inline-block !important;
  position: relative !important;
}
/* --- end v77d13-pillmatch8 --- */


/* --- v77d13-pillmatch9: force pill down using transform (overrides flex/margins) --- */
section.see-zyniq .hero-left .badge{
  transform: translateY(40px) !important;
  display: inline-flex !important;
  will-change: transform;
}
/* --- end v77d13-pillmatch9 --- */


/* --- v77d13-mobilefix: TV section stacks on mobile + white box scroll fix --- */
@media (max-width: 960px){
  /* Stack the TradingView section like 'See ZynIQ in action': image first, text below */
  .tv-indicators .container{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .tv-indicators .preview{ order: 0; width: 100%; }
  .tv-indicators .hero-left, .tv-indicators .copy, .tv-indicators .content{ order: 1; width: 100%; }

  /* Ensure the image/card uses full width and natural height */
  .tv-indicators .preview .preview-inner.tv-mock{ width: 100%; max-width: 100%; }
  .tv-indicators .preview img{ width: 100%; height: auto; object-fit: contain; }

  /* White-box flash on scroll: enforce dark background and suppress overscroll glow */
  html, body{ background:#0b121a !important; }
  main, .page, .wrapper{ background:#0b121a !important; }
  body{ overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
  *{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
}
/* --- end v77d13-mobilefix --- */


/* Hero layout – text + orb */
.hero .container{
  align-items: center;
}

.hero .hero-left{
  max-width: 560px;
  width: auto;
  margin: 0;
}

.hero .hero-orb-visual{
  flex-shrink: 0;
  margin-left: 120px; /* horizontal gap between text and orb */
}

.hero .hero-orb-img{
  display: block;
  width: 240px;
  height: auto;
  filter: drop-shadow(0 0 32px rgba(0,220,255,0.55)) drop-shadow(0 0 64px rgba(0,180,255,0.35));
}

/* Hide orb on small screens */
@media (max-width: 820px){
  .hero .hero-orb-visual{
    display: none;
  }
}



/* vMobile-index-01 – stack indicator & bot grids on small screens */
@media (max-width: 768px){
  .indicator-showcase-grid,
  .bot-showcase-grid{
    display: grid;
    grid-template-columns: 1fr !important;
  }
}