/* ===========================
   ROOT / BASE
=========================== */
:root{
  --tgprofit-bg:#0b0f14;
  --tgprofit-card:#121922;
  --tgprofit-text:#eaf1f7;
  --tgprofit-muted:#9fb0be;
  --tgprofit-accent:#2ca5e0;
  --tgprofit-green:#34d06b;
  --tgprofit-shadow:#00000066;
}

*{ box-sizing:border-box }

.bodyanimaton{
  margin:0;
  color:var(--tgprofit-text);
}

/* ===========================
   TGPROFIT GRID
=========================== */
.tgprofit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "invest subs"
    "money sales";
  gap:24px;
  position:relative;
  width:min(700px,95vw);
  margin:auto;
}

#tgprofit-investCard{grid-area:invest;}
#tgprofit-subsCard{grid-area:subs;}
#tgprofit-moneyCard{grid-area:money;}
#tgprofit-salesCard{grid-area:sales;}

.tgprofit-card{
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border-radius:18px;
  padding:14px 18px;
  box-shadow:0 10px 30px #89898929, inset 0 1px 0 #89898917;
  border:1px solid #ffffff14;
  height:100px;
  position:relative;
  z-index:2;
}

.tgprofit-logo{
  width:58px;
  height:58px;
  border-radius:14px;
  display:grid;
  place-items:center;
}

.tgprofit-meta{ display:grid }

.tgprofit-label{
  font-weight:600;
  font-size:16px;
  color:#00000087;
  margin-bottom:14px;
}

.tgprofit-value{
  font-size:36px;
  font-weight:900;
  color:#000000ab;
}

#tgprofit-moneyVal{ color:var(--tgprofit-green); }

/* ===========================
   TGPROFIT LINE
=========================== */
.tgprofit-line{
  position:absolute;
  inset:0;
  width:100%;
  height:140%;
  top:-120px;
  pointer-events:none;
  z-index:1;
}

.tgprofit-wire{
  fill:none;
  stroke:#fff;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.25;
  filter:blur(2px);
}

.tgprofit-dash{
  fill:none;
  stroke:#00a7ff;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:14 12;
  animation:tgprofit-dashmove 8s linear infinite;
  filter:drop-shadow(0 0 8px #00a7ff70);
}

@keyframes tgprofit-dashmove{
  to{ stroke-dashoffset:-200 }
}

/* ===========================
   TG IMAGE
=========================== */
.tgimg-wrap{
  width:400px;
  height:500px;
  position:relative;
  perspective:1200px;
  margin:0 auto;
}

.tgimg-animated{
  display:block;
  width:100%;
  height:auto;
  transform-style:preserve-3d;
  will-change:transform,filter;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.05));
  animation:
    tgimg-float 2s ease-in-out infinite,
    tgimg-rotateZ 4s ease-in-out infinite;
}

@keyframes tgimg-float{
  0%,100%{ transform:rotateX(12deg) rotateY(-16deg) translateY(0) scale(1); }
  50%{ transform:rotateX(20deg) rotateY(12deg) translateY(-16px) scale(1.03); }
}

@keyframes tgimg-rotateZ{
  0%,100%{ transform:rotateZ(0deg) }
  50%{ transform:rotateZ(1.2deg) }
}

.tgimg-animated:hover{ animation-play-state:paused }

@media (prefers-reduced-motion: reduce){
  .tgimg-animated{ animation:none }
}

/* ===========================
   GS SIDE (BADGES + LINES)
=========================== */
.gsside-wrap{
  position:relative;
  width:min(900px,95vw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(28px,6vw,100px);
}

.gsside-img{
  width:min(400px,70vw);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}

.gsside-left,
.gsside-right{
  display:flex;
  flex-direction:column;
  gap:clamp(18px,6vw,80px);
  position: relative;
    top: -15px;
}

.gsside-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:#eef6ff;
  color:#0078d7;
  font-weight:700;
  font-size:15px;
  box-shadow:0 6px 18px rgba(20,102,204,.12);
  animation:gsside-float 6s ease-in-out infinite;
}

.gsside-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2ca5e0;
  box-shadow:0 0 10px #2ca5e0;
}

@keyframes gsside-float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-6px) }
}

/* SVG линии */
.gsp-line{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.gsp-line path{
  fill:none;
  stroke:#2ca5e0;
  stroke-width:2;
  stroke-dasharray:6 8;
  stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(44,165,224,.45));
  animation:gsp-dashmove 6s linear infinite;
}

@keyframes gsp-dashmove{
  to{ stroke-dashoffset:-30 }
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width:1024px){
  .tgprofit-grid {

  }
  .gsside-wrap{
    flex-direction:column;
    gap:40px;
    width:min(700px,92vw);
  }

  .gsside-left,
  .gsside-right{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
  }

  .gsp-line{ display:none }
}

@media (max-width:560px){
  .tgprofit-grid{
    width:92vw;
    gap:14px;

  }
  .tgprofit-line {
    height: 160%;
  }

  .tgprofit-card{
    height:auto;
    padding:12px 14px;
    border-radius:16px;
  }

  .tgprofit-logo{
    width:48px;
    height:48px;
  }

  .tgprofit-label{ font-size:13px }
  .tgprofit-value{
    font-size:28px;
    white-space:nowrap;
  }
.gsside-left .gsside-badge:nth-child(1), .gsside-left .gsside-badge:nth-child(2), .gsside-left .gsside-badge:nth-child(3) {
        box-shadow: 5px 5px 5px #0c131b24;
    }
    .gsside-right .gsside-badge:nth-child(1), .gsside-right .gsside-badge:nth-child(2), .gsside-right .gsside-badge:nth-child(3) {
        box-shadow: -5px 5px 5px #0c131b24;
    }
}


@media (max-width:380px){
  .tgprofit-value{ font-size:24px }
  .gsside-img{ width:min(260px,90vw) }
}
/* ===========================
   TGPROFIT: MOBILE PATCH
   ставь самым последним
=========================== */

/* базовая страховка от горизонтального скролла */
.tgprofit-grid{ max-width: 100%; }
.tgprofit-card{ min-width: 0; }

/* планшеты / небольшие ноуты */
@media (max-width: 900px){
  .tgprofit-grid{
    width: min(680px, 94vw);
    gap: 18px;
  }
  .tgprofit-value{ font-size: 32px; }
}

/* телефоны */
@media (max-width: 560px){
  .tgprofit-grid{
    width: 92vw;
    gap: 14px;
  }

  .tgprofit-card{
    height: auto;                 /* вместо фикс 100px */
    padding: 12px 14px;           /* компактнее */
    gap: 12px;
    border-radius: 16px;
  }

  .tgprofit-logo{
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex: 0 0 auto;
  }

  .tgprofit-logo svg{
    width: 36px;
    height: 36px;
  }

  .tgprofit-label{
    font-size: 13px;
    margin-bottom: 8px;
  }

  .tgprofit-value{
    font-size: 20px;
    line-height: 1.05;
    letter-spacing: -0.5px;
    white-space: nowrap;          /* чтобы сумма не переносилась */
  }

  /* линия на мобиле чаще мешает — скрываем */
}

/* очень маленькие телефоны */
@media (max-width: 380px){
  .tgprofit-grid{ gap: 12px; }

  .tgprofit-card{
    padding: 10px 12px;
    border-radius: 14px;
  }

  .tgprofit-logo{
    width: 44px;
    height: 44px;
    border-radius: 11px;
  }

  .tgprofit-logo svg{
    width: 34px;
    height: 34px;
  }

  .tgprofit-label{ font-size: 12px; }
  .tgprofit-value{ font-size: 24px; }
}
/* ===========================
   GS SIDE: MOBILE "AROUND ICON"
   (плашки вокруг логотипа)
   ставь самым последним
=========================== */
@media (max-width: 1460px){
.pmob {
  display: none;
}
.btnhead{
  position: absolute;
          bottom: -130px;
  width: 260px;

  left: 50%;
  transform: translateX(-50%);
}

  /* контейнер */
  .gsside-wrap{
    width: 92vw;
    max-width: 520px;
    margin: 0 auto;
    position: relative;
    padding: 0px 0 24px;
  }

  /* на мобиле линии можно скрыть, чтобы не мешали */
  .gsp-line{ display:none !important; }

  /* картинка по центру */
  .gsside-img{
    width: min(220px, 86vw) !important;
    margin: 0 auto;
    position: relative;
  }

  /* левый/правый блоки превращаем в "слои" вокруг картинки */
  .gsside-left,
  .gsside-right{
    position: absolute;
    inset: 0;                 /* растянуть на всю область wrap */
    z-index: 3;               /* выше картинки */
    pointer-events: none; 
  /* чтобы клики не ломались (если надо кликабельно — убери) */
  }

  /* сами плашки — абсолют */
  .gsside-left .gsside-badge,
  .gsside-right .gsside-badge{
    position: absolute;
    pointer-events: auto;     /* можно кликать по плашкам */
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
  }

  /* ===== ЛЕВАЯ СТОРОНА (3 плашки) ===== */
  .gsside-left .gsside-badge:nth-child(1){
    left: 10px;
    top: 10%;
    transform: rotate(-3deg);
  }
  .gsside-left .gsside-badge:nth-child(2){
    left: 10px;
    top: 37%;
    transform: rotate(-1deg);
  }
  .gsside-left .gsside-badge:nth-child(3){
    left: 10px;
    top: 65%;
    transform: rotate(2deg);
  }

  /* ===== ПРАВАЯ СТОРОНА (3 плашки) ===== */
  .gsside-right .gsside-badge:nth-child(1){
    right: 10px;
    top: 10%;
    transform: rotate(3deg);
  }
  .gsside-right .gsside-badge:nth-child(2){
    right: 10px;
    top: 37%;
    transform: rotate(1deg);
  }
  .gsside-right .gsside-badge:nth-child(3){
    right: 10px;
    top: 65%;
    transform: rotate(-2deg);
  }

  /* если "Контент" с иконками слишком широкий — чуть ужмём */
  .gsside-badge--content{
    padding-right: 46px; /* чтобы иконки внутри не прилипали */
  }
}

/* очень маленькие телефоны — ближе к краям и меньше */
@media (max-width: 380px){
  .gsside-left .gsside-badge:nth-child(1),
  .gsside-left .gsside-badge:nth-child(2),
  .gsside-left .gsside-badge:nth-child(3){ left: 6px; }

  .gsside-right .gsside-badge:nth-child(1),
  .gsside-right .gsside-badge:nth-child(2),
  .gsside-right .gsside-badge:nth-child(3){ right: 6px; }

  .gsside-left .gsside-badge,
  .gsside-right .gsside-badge{
    font-size: 12px;
    padding: 9px 12px;
  }
}