/* ============================================================
   Globinex — Trust / Quality Verification section
   Recreation of the trustsample.com hero animation
   ============================================================ */
:root {
  --tv-bg-1:   #04120B;
  --tv-bg-2:   #000000;
  --tv-teal:   #00CC5E;
  --tv-cyan:   #00AB4F;
  --tv-green:  #00CC5E;
  --tv-green2: #00873E;
  --tv-purple: #8b6cf0;
  --tv-gold:   #f5a623;
  --tv-red:    #ff5a5a;
  --tv-blue:   #00AB4F;
  --tv-text:   #cdd8dc;
  --tv-muted:  #6b7d84;
}

.tv-section {
  position: relative;
  background:
    radial-gradient(1200px 520px at 62% 46%, rgba(0,135,62,.32) 0%, rgba(4,18,11,0) 60%),
    linear-gradient(160deg, var(--tv-bg-1) 0%, var(--tv-bg-2) 100%);
        background: conic-gradient(from 82deg at 50% 50%, #04361C 0deg, #0C251C 360deg);
  overflow: hidden;
  padding: 20px 0;
  min-height: 420px;
  display: flex;
  align-items: center;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.tv-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(0,171,79,.06) 0 1px, transparent 1px),
    radial-gradient(circle at 82% 70%, rgba(0,204,94,.06) 0 1px, transparent 1px);
  background-size: 46px 46px, 60px 60px;
  pointer-events: none;
}
.tv-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 200px;
  align-items: center;
  gap: 0;
  width: 100%;
}

/* ============================================================
   LEFT — country / people bubbles
   ============================================================ */
.tv-left { position: relative; height: 340px; }
.bubble {
  position: absolute;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 500; font-size: 13px; letter-spacing: .5px;
  color: #fff;
  background: rgba(10,25,32,.55);
  animation: bubbleFloat var(--dur,7s) ease-in-out infinite;
  animation-delay: var(--delay,0s);
}
.bubble.country {
  width: 38px; height: 38px;
  border: 1.5px solid var(--c, var(--tv-cyan));
  box-shadow: 0 0 0 4px rgba(0,0,0,.15),
              0 0 16px 1px var(--c, var(--tv-cyan)),
              inset 0 0 12px -3px var(--c, var(--tv-cyan));
  color: var(--c, #fff);
}
.bubble.person {
  width: 34px; height: 34px;
  border: 1px solid rgba(120,150,160,.35);
  color: rgba(150,170,180,.6);
  font-size: 15px;
  box-shadow: inset 0 0 10px -4px rgba(160,190,200,.5);
  opacity: .6;
}
.bubble.person.dim { opacity: .32; width: 28px; height: 28px; }
.bubble .bi { font-size: 16px; }
@keyframes bubbleFloat {
  0%,100% { transform: translate(0,0); }
  33%     { transform: translate(6px,-12px); }
  66%     { transform: translate(-7px,8px); }
}

/* ============================================================
   CENTER — shield + flags
   ============================================================ */
.tv-center { position: relative; height: 350px; display: grid; place-items: center; }
.shield-wrap { position: relative; width: 210px; height: 250px; }
.shield-frame {
  position: absolute; left: 50%; top: 50%;
  width: 320px; height: 320px; transform: translate(-50%,-50%);
  /* border: 1px solid rgba(0,204,94,.22); */
  border-radius: 30px;
  pointer-events: none;
}
.shield-frame::before, .shield-frame::after {
  content: ""; position: absolute; width: 26px; height: 26px;
  /* border: 2px solid rgba(0,204,94,.55); */
}
.shield-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 30px 0 0 0; }
.shield-frame::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 30px 0; }
.shield-glow {
  position: absolute; left: 50%; top: 48%;
  width: 360px; height: 360px; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(0,204,94,.30) 0%, rgba(0,204,94,0) 62%);
  animation: glowPulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glowPulse { 0%,100%{opacity:.6; transform:translate(-50%,-50%) scale(1);} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.08);} }
.shield-svg { position: relative; z-index: 2; width: 210px; height: 200px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); animation: shieldBob 6s ease-in-out infinite; }
@keyframes shieldBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.check-path { stroke: #eafff5; stroke-width: 15; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 150; stroke-dashoffset: 150; animation: checkDraw 1.4s ease .3s forwards; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
.scan-line {
  position: absolute; left: 12%; right: 12%; z-index: 3;
  height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--tv-green), transparent);
  box-shadow: 0 0 14px 2px var(--tv-green);
  animation: scan 3s ease-in-out infinite;
}
@keyframes scan { 0%,100%{ top: 22%; opacity:.4;} 50%{ top: 74%; opacity:1;} }
.tv-label {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap; text-align: center;
  font-weight: 800; font-size: 14px; color: #fff; letter-spacing: .4px;
  text-transform: uppercase;
}
.tv-label .badge-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--tv-green); color: #04120b;
  font-size: 13px;
  box-shadow: 0 0 14px -2px var(--tv-green);
}

/* flags */
.flag {
  position: absolute; z-index: 5;
  display: inline-flex; align-items: stretch;
  border-radius: 8px; overflow: hidden;
  font-size: 12px; font-weight: 400; white-space: nowrap;
  background: #0b0f0d; color: #fff;
  opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.6);
}
.flag.show { opacity: 1; transform: translateY(0) scale(1); }
.flag .flag-ic { display: flex; align-items: center; justify-content: center; width: 28px; font-size: 14px; }
.flag .flag-text { display: flex; align-items: center; padding: 6px 10px 6px 7px; }
.flag.red    .flag-ic { background: var(--tv-red);    color: #1c0d0d; }
.flag.red    { border: 1px solid var(--tv-red);    box-shadow: 0 0 18px -4px var(--tv-red); }
.flag.green  .flag-ic { background: var(--tv-green); color: #04140a; }
.flag.green  { border: 1px solid var(--tv-green2); box-shadow: 0 0 18px -6px var(--tv-green); }
.flag.purple .flag-ic { background: var(--tv-purple); color: #150e22; }
.flag.purple { border: 1px solid var(--tv-purple); box-shadow: 0 0 18px -6px var(--tv-purple); }
.flag.amber  .flag-ic { background: var(--tv-gold);  color: #1a1405; }
.flag.amber  { border: 1px solid var(--tv-gold);   box-shadow: 0 0 18px -6px var(--tv-gold); }
.flag.teal   .flag-ic { background: #2dd4d4; color: #06201f; }
.flag.teal   { border: 1px solid #2dd4d4; box-shadow: 0 0 18px -6px rgba(45,212,212,.7); }
.flag.f-top    { top: 5%;  left: 50%; transform: translateX(-50%) translateY(6px) scale(.96); }
.flag.f-top.show    { transform: translateX(-50%) translateY(0) scale(1); }
.flag.f-mid    { top: 35%; left: 46%; transform: translateX(-50%) translateY(6px) scale(.96); }
.flag.f-mid.show    { transform: translateX(-50%) translateY(0) scale(1); }
.flag.f-bottom { bottom: 22%; left: 50%; transform: translateX(-50%) translateY(6px) scale(.96); }
.flag.f-bottom.show { transform: translateX(-50%) translateY(0) scale(1); }

/* ============================================================
   Continuous respondent journey (JS-driven)
   ============================================================ */
.tv-flow { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.tv-runner {
  position: absolute; transform: translate(-50%,-50%);
  color: var(--tv-green); font-size: 18px;
  filter: drop-shadow(0 0 8px rgba(0,204,94,.9));
  will-change: left, top, opacity;
  transition: color .25s ease, filter .25s ease;
}
.tv-runner.rejected {
  color: var(--tv-red);
  filter: drop-shadow(0 0 9px rgba(255,90,90,.95));
  animation: rejectShake .4s ease;
}
@keyframes rejectShake {
  0%,100% { margin-left: 0; } 25% { margin-left: -4px; } 75% { margin-left: 4px; }
}
.shield-wrap.hit .shield-glow { opacity: 1; transform: translate(-50%,-50%) scale(1.14); }
.db-icon { transition: box-shadow .3s ease, transform .3s ease; }
.db-icon.hit { transform: scale(1.12); box-shadow: 0 0 30px -2px var(--tv-green), inset 0 0 20px -4px var(--tv-green); color: var(--tv-green); border-color: var(--tv-green); }
.tv-card .ic, .tv-card .lbl { transition: transform .35s ease, box-shadow .35s ease, text-shadow .35s ease; }
.tv-card.hit .ic { transform: translateY(-7px) scale(1.06); box-shadow: 0 0 34px -2px var(--cc), inset 0 0 22px -4px var(--cc); }
.tv-card.hit .lbl { text-shadow: 0 0 16px var(--cc); }

/* ============================================================
   CERTIFIED — flowing particles + counter
   ============================================================ */
.tv-certified { position: relative; height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flow-track { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.flow-dot {
  position: absolute; top: var(--y,50%); left: -20px;
  color: var(--tv-green);
  font-size: var(--sz,16px);
  opacity: 0;
  animation: flowRight var(--fdur,4s) linear infinite;
  animation-delay: var(--fdelay,0s);
  filter: drop-shadow(0 0 6px rgba(0,204,94,.7));
}
@keyframes flowRight {
  0%   { opacity: 0; left: 0%;  transform: scale(.6); }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; left: 96%; transform: scale(1.1); }
}
.db-icon {
  position: relative; z-index: 2;
  width: 80px; height: 80px; border-radius: 50%;
  border: 1.5px solid rgba(0,171,79,.45);
  display: grid; place-items: center;
  color: var(--tv-cyan); font-size: 40px;
  box-shadow: 0 0 22px -6px var(--tv-cyan), inset 0 0 16px -6px var(--tv-cyan);
  margin-bottom: 20px;
}
.cert-label { font-size: 13px; letter-spacing: 2px; color: var(--tv-muted); font-weight: 600; margin: 0 0 6px; }
.cert-num {
  font-family: 'Inter', monospace;
  font-weight: 700; font-size: 24px; letter-spacing: 1px;
  color: #e6fff2;
  text-shadow: 0 0 22px rgba(0,204,94,.45);
  margin: 0; font-variant-numeric: tabular-nums;
}

/* ============================================================
   RIGHT — brand / agency / consultancy cards
   ============================================================ */
.tv-cards { display: flex; flex-direction: column; gap: 26px; align-items: center; }
.tv-card { text-align: center; }
.tv-card .ic {
  width: 50px; height: 50px; border-radius: 12px; margin: 0 auto 10px;
  display: grid; place-items: center; font-size: 18px;
  background: rgba(10,25,32,.6);
  border: 1px solid var(--cc, var(--tv-green));
  color: var(--cc, var(--tv-green));
  box-shadow: 0 0 20px -6px var(--cc, var(--tv-green)), inset 0 0 18px -8px var(--cc, var(--tv-green));
  transition: transform .3s ease, box-shadow .3s ease;
}
.tv-card:hover .ic { transform: translateY(-5px); box-shadow: 0 0 30px -4px var(--cc), inset 0 0 20px -6px var(--cc); }
.tv-card .lbl { font-size: 12px; font-weight: 500; letter-spacing: 1.5px; color: var(--cc, var(--tv-green)); }

/* incoming flow dots to the cards */
.card-flow { position: absolute; right: 190px; top: 0; bottom: 0; width: 220px; pointer-events: none; z-index: 1; }
.card-dot {
  position: absolute; left: 0; top: var(--cy,50%);
  color: var(--tv-green); font-size: 15px; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(0,204,94,.7));
  animation: cardFlow var(--cdur,3.5s) linear infinite;
  animation-delay: var(--cdelay,0s);
}
@keyframes cardFlow {
  0%   { opacity: 0; left: 0;   transform: scale(.5); }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; left: 100%; transform: scale(1.15); }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1199px){
  .tv-inner { grid-template-columns: 1fr 1fr 1fr 160px; }
}
@media (max-width: 991px){
  .tv-inner { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .tv-cards { flex-direction: row; grid-column: 1 / -1; justify-content: center; gap: 40px; }
  .card-flow { display: none; }
}
@media (max-width: 575px){
  .tv-inner { grid-template-columns: 1fr; }
  .tv-left { height: 260px; }
  .cert-num { font-size: 32px; }
}