/* tenders.best — landing: Telegram alerts promo (below the hero). The chat in the phone is played by tgpromo.js. */
.tgp { --tg:#2aabee; --tg-deep:#1c8fd6; position:relative; z-index:2; padding:34px 0 30px; }
.tgp__card {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:36px;
  min-height:640px;
  overflow:hidden;
  padding:64px 30px 64px 64px;
  border-radius:40px;
  color:#fff;
  background:
    radial-gradient(60% 80% at 88% 18%,rgba(42,171,238,.55),transparent 62%),
    radial-gradient(55% 70% at 4% 104%,rgba(214,61,240,.42),transparent 64%),
    linear-gradient(138deg,#120a35 0%,#24107a 46%,#3519c4 100%);
  box-shadow:0 60px 120px -70px rgba(36,16,122,.9),0 0 0 1px rgba(255,255,255,.06) inset;
}
.tgp__card::after { /* fine top light edge */
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 22%);
  pointer-events:none;
}

/* background life: aurora blobs, dot grid, flight trail with paper planes */
.tgp__aurora { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.tgp__aurora i { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; mix-blend-mode:screen; animation:tgpAurora 16s ease-in-out infinite; }
.tgp__aurora i:nth-child(1) { width:420px; height:420px; right:4%; top:-120px; background:#2aabee; }
.tgp__aurora i:nth-child(2) { width:360px; height:360px; left:-90px; bottom:-140px; background:#c13cf0; animation-delay:-5s; }
.tgp__aurora i:nth-child(3) { width:300px; height:300px; left:42%; top:38%; background:#5a3cff; animation-delay:-10s; opacity:.4; }
@keyframes tgpAurora { 0%,100% { transform:translate(0,0) scale(1); } 33% { transform:translate(40px,30px) scale(1.12); } 66% { transform:translate(-30px,20px) scale(.92); } }
.tgp__dots {
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 80% at 70% 40%,#000,transparent 75%);
  mask-image:radial-gradient(70% 80% at 70% 40%,#000,transparent 75%);
  pointer-events:none;
}
.tgp__trail { position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }
.tgp__trail > path { fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.6; stroke-dasharray:2 10; stroke-linecap:round; animation:tgpDash 30s linear infinite; }
@keyframes tgpDash { to { stroke-dashoffset:-480; } }
.tgp__fly path { fill:#fff; filter:drop-shadow(0 0 6px rgba(120,210,255,.9)); }
.tgp__fly--2 path { fill:#b9e6ff; opacity:.75; }

/* copy */
.tgp__copy { position:relative; z-index:2; display:grid; justify-items:start; gap:22px; min-width:0; }
.tgp__eyebrow {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 14px 6px 6px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  overflow:hidden;
}
.tgp__eyebrow::after { /* passing shine */
  content:"";
  position:absolute;
  inset:0 auto 0 -40%;
  width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);
  animation:tgpShine 4.5s ease-in-out infinite;
}
@keyframes tgpShine { 0%,55% { left:-40%; } 100% { left:130%; } }
.tgp__tg { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#37bbfe,#1d93d2); box-shadow:0 6px 16px -6px rgba(42,171,238,.9); }
.tgp__tg .icon { width:14px; height:14px; margin-left:-1px; color:#fff; }
.tgp__title { margin:0; max-width:560px; color:#fff; font-size:clamp(34px,3.6vw,52px); line-height:1.04; letter-spacing:-.045em; }
.tgp__hl {
  background:linear-gradient(95deg,#7fd6ff 0%,#2aabee 40%,#d9b3ff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:tgpHl 6s ease-in-out infinite alternate;
}
@keyframes tgpHl { to { background-position:100% 0; } }
.tgp__lead { max-width:540px; margin:-4px 0 0; color:rgba(255,255,255,.78); font-size:16.5px; line-height:1.65; }

.tgp__pick { display:grid; gap:12px; max-width:560px; }
.tgp__pick-label { display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.72); font-size:13px; font-weight:600; }
.tgp__pick-label .icon { width:15px; height:15px; color:#ffd257; animation:tgpTwinkle 2.4s ease-in-out infinite; }
@keyframes tgpTwinkle { 0%,100% { transform:scale(1) rotate(0); opacity:1; } 50% { transform:scale(1.25) rotate(18deg); opacity:.7; } }
.tgp__chips { display:flex; flex-wrap:wrap; gap:8px; }
.tgp__chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:6px 14px 6px 7px;
  border-radius:999px;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-size:13.5px;
  font-weight:600;
  transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,transform .3s var(--sa-spring,cubic-bezier(.34,1.56,.64,1));
}
.tgp__chip img { flex:none; width:22px; height:22px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.tgp__chip:hover { background:rgba(255,255,255,.16); transform:translateY(-2px); }
.tgp__chip:focus-visible { outline:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 0 0 4px rgba(42,171,238,.45); }
.tgp__chip.is-on { color:#1b1046; background:#fff; box-shadow:0 10px 26px -12px rgba(42,171,238,.95),0 0 0 3px rgba(42,171,238,.35); }
.tgp__chip.is-on img { box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(42,171,238,.6); }
.tgp__chip.is-pop { animation:tgpPop .5s var(--sa-spring,cubic-bezier(.34,1.56,.64,1)); }
.tgp__chip.is-shake { animation:tgpShake .4s ease; }
@keyframes tgpPop { 0% { transform:scale(.86); } 60% { transform:scale(1.08); } 100% { transform:scale(1); } }
@keyframes tgpShake { 20%,60% { transform:translateX(-4px); } 40%,80% { transform:translateX(4px); } }

.tgp__steps { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:580px; margin:4px 0 0; padding:0; list-style:none; counter-reset:none; }
.tgp__steps::before { /* connecting line with a travelling light */
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:17px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.1)),linear-gradient(90deg,transparent,#7fd6ff,transparent);
  background-size:100% 100%,40% 100%;
  background-repeat:no-repeat;
  animation:tgpRun 3.2s linear infinite;
}
@keyframes tgpRun { from { background-position:0 0,-60% 0; } to { background-position:0 0,160% 0; } }
.tgp__steps li { position:relative; display:grid; gap:10px; color:rgba(255,255,255,.82); font-size:13.5px; line-height:1.45; }
.tgp__steps b {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 8px 18px -10px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  font-size:14px;
}
.tgp__steps li:nth-child(2) b { background:linear-gradient(135deg,#37bbfe,#1d93d2); box-shadow:0 10px 22px -8px rgba(42,171,238,.9); }

.tgp__cta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:6px; }
.tgp__btn {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:8px 26px 8px 8px;
  border-radius:999px;
  color:#1b1046;
  background:#fff;
  font-size:16px;
  font-weight:700;
  box-shadow:0 18px 40px -16px rgba(42,171,238,.85),0 0 0 6px rgba(255,255,255,.08);
  transition:transform .3s var(--sa-spring,cubic-bezier(.34,1.56,.64,1)),box-shadow .3s ease;
  overflow:hidden;
}
.tgp__btn:hover { transform:translateY(-2px); box-shadow:0 24px 48px -16px rgba(42,171,238,.95),0 0 0 8px rgba(255,255,255,.1); }
.tgp__btn:focus-visible { outline:0; box-shadow:0 0 0 4px rgba(127,214,255,.8); }
.tgp__btn-ico { position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#37bbfe,#1d93d2); overflow:hidden; }
.tgp__btn-ico .icon { width:18px; height:18px; margin-left:-2px; color:#fff; transition:transform .45s cubic-bezier(.6,-0.3,.4,1.4); }
.tgp__btn:hover .tgp__btn-ico .icon { animation:tgpLaunch .9s cubic-bezier(.5,0,.3,1); }
@keyframes tgpLaunch { 0% { transform:none; } 45% { transform:translate(26px,-26px) rotate(-12deg); opacity:0; } 46% { transform:translate(-26px,26px); opacity:0; } 100% { transform:none; opacity:1; } }

/* stage: phone with the bot chat */
.tgp__stage { position:relative; z-index:1; display:grid; place-items:center; min-height:560px; }
.tgp__rings { position:absolute; left:50%; top:50%; width:0; height:0; }
.tgp__rings i { position:absolute; left:-220px; top:-220px; width:440px; height:440px; border-radius:50%; border:1px solid rgba(127,214,255,.35); animation:tgpRing 4.8s ease-out infinite; }
.tgp__rings i:nth-child(2) { animation-delay:-1.6s; }
.tgp__rings i:nth-child(3) { animation-delay:-3.2s; }
@keyframes tgpRing { 0% { transform:scale(.55); opacity:0; } 25% { opacity:.9; } 100% { transform:scale(1.25); opacity:0; } }

.tgp__phone {
  position:relative;
  width:308px;
  height:600px;
  padding:11px;
  border-radius:54px;
  background:linear-gradient(150deg,#3a3166 0%,#14102d 60%,#241b4a 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 5px #0b0920,0 50px 90px -35px rgba(5,2,25,.85),0 0 70px -10px rgba(42,171,238,.35);
  animation:tgpPhone 7s ease-in-out infinite;
}
@keyframes tgpPhone { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
.tgp__screen {
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  border-radius:44px;
  color:#14123a;
  background:
    radial-gradient(rgba(91,60,255,.09) 1.2px,transparent 1.4px) 0 0/18px 18px,
    linear-gradient(170deg,#cfe3ff 0%,#e3dbff 52%,#f6dcf4 100%);
}
.tgp__status { position:relative; display:flex; align-items:center; justify-content:space-between; box-sizing:border-box; height:52px; padding:12px 26px 12px 30px; background:rgba(255,255,255,.72); font-size:13px; font-weight:700; line-height:28px; }
.tgp__island { position:absolute; left:50%; top:12px; width:90px; height:28px; margin-left:-45px; border-radius:20px; background:#0b0920; }
.tgp__sig { display:inline-flex; align-items:flex-end; gap:2px; height:11px; margin-bottom:1px; }
.tgp__sig i { width:3px; border-radius:1px; background:#14123a; }
.tgp__sig i:nth-child(1) { height:4px; } .tgp__sig i:nth-child(2) { height:6px; } .tgp__sig i:nth-child(3) { height:8px; } .tgp__sig i:nth-child(4) { height:11px; }
.tgp__head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:2px 12px 8px; background:rgba(255,255,255,.72); box-shadow:0 1px 0 rgba(20,18,58,.06); }
.tgp__back { display:inline-flex; align-items:center; color:#1c8fd6; }
.tgp__back .icon { width:20px; height:20px; }
.tgp__back em { min-width:20px; padding:1px 6px; border-radius:999px; background:#1c8fd6; color:#fff; font-size:11px; font-style:normal; font-weight:700; text-align:center; }
.tgp__back em.is-bump { animation:tgpPop .45s var(--sa-spring,cubic-bezier(.34,1.56,.64,1)); }
.tgp__who { display:grid; justify-items:center; line-height:1.2; }
.tgp__who b { font-size:14px; }
.tgp__who small { color:#7d7a96; font-size:11.5px; transition:color .2s ease; }
.tgp__who small.is-typing { color:#1c8fd6; }
.tgp__ava { width:34px; height:34px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 0 0 2px rgba(42,171,238,.35); }
.tgp__ava img { width:100%; height:100%; object-fit:cover; }
.tgp__pin { display:flex; align-items:center; gap:9px; padding:7px 14px; background:rgba(255,255,255,.62); border-bottom:1px solid rgba(20,18,58,.06); font-size:11.5px; line-height:1.3; }
.tgp__pin .icon { flex:none; width:15px; height:15px; color:#1c8fd6; }
.tgp__pin span { display:grid; min-width:0; }
.tgp__pin b { color:#1c8fd6; font-size:11.5px; }
.tgp__pin small { overflow:hidden; color:#47456a; text-overflow:ellipsis; white-space:nowrap; }
.tgp__pin.is-flash { animation:tgpFlash .9s ease; }
@keyframes tgpFlash { 0% { background:rgba(42,171,238,.35); } 100% { background:rgba(255,255,255,.62); } }

.tgp__chat { position:relative; display:flex; flex:1; flex-direction:column; justify-content:flex-end; gap:10px; min-height:0; overflow:hidden; padding:10px 10px 8px; }
.tgp__msg { display:grid; gap:4px; max-width:94%; transform-origin:0 100%; }
.tgp__msg.is-in { animation:tgpIn .62s var(--sa-spring,cubic-bezier(.34,1.56,.64,1)) both; }
.tgp__msg.is-out { animation:tgpOut .36s ease both; }
@keyframes tgpIn { from { opacity:0; transform:translateY(22px) scale(.86); } to { opacity:1; transform:none; } }
@keyframes tgpOut { to { opacity:0; transform:translateY(-14px) scale(.94); } }
.tgp__bub { position:relative; padding:9px 11px 18px; border-radius:16px 16px 16px 5px; background:#fff; box-shadow:0 2px 6px rgba(30,20,90,.08),0 10px 24px -18px rgba(30,20,90,.5); font-size:11.8px; line-height:1.38; }
.tgp__bub p { margin:0; }
.tgp__n-head { color:#47456a; font-size:11px; line-height:1.4; }
.tgp__n-head img { display:inline-block; width:15px; height:15px; margin-right:5px; border-radius:50%; object-fit:cover; vertical-align:-3px; }
.tgp__n-head b { color:#14123a; }
.tgp__n-title { margin:5px 0 4px !important; color:#14123a; font-size:12.4px; font-weight:700; line-height:1.3; }
.tgp__n-row { display:flex; align-items:flex-start; gap:5px; color:#47456a; }
.tgp__n-row .icon { flex:none; width:13px; height:13px; margin-top:1px; color:#7b6ccf; }
.tgp__n-row--dl { color:#b45309; font-weight:600; }
.tgp__n-row--dl .icon { color:#d97706; }
.tgp__bub time { position:absolute; right:10px; bottom:5px; color:#9a97b3; font-size:10px; }
.tgp__kbd { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.tgp__kbd span { padding:6px 4px; border-radius:10px; background:rgba(255,255,255,.55); color:#1c8fd6; font-size:11px; font-weight:600; text-align:center; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.tgp__typing { display:inline-flex; align-self:flex-start; gap:4px; padding:11px 14px; animation:tgpIn .4s ease both; border-radius:16px 16px 16px 5px; background:#fff; box-shadow:0 2px 6px rgba(30,20,90,.08); }
.tgp__typing i { width:7px; height:7px; border-radius:50%; background:#9a97b3; animation:tgpDot 1s ease-in-out infinite; }
.tgp__typing i:nth-child(2) { animation-delay:.15s; } .tgp__typing i:nth-child(3) { animation-delay:.3s; }
@keyframes tgpDot { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-5px); opacity:1; } }
.tgp__input { display:flex; align-items:center; gap:8px; margin:0 10px 14px; padding:7px 7px 7px 16px; border-radius:22px; background:rgba(255,255,255,.85); color:#9a97b3; font-size:12.5px; }
.tgp__input span { flex:1; }
.tgp__input i { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#37bbfe,#1d93d2); }
.tgp__input .icon { width:14px; height:14px; color:#fff; }

/* push banner: slides down inside the screen, under the island, like an iOS notification */
.tgp__push {
  position:absolute;
  z-index:6;
  top:54px;
  left:8px;
  right:8px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1px 9px;
  padding:9px 12px 9px 9px;
  border-radius:18px;
  color:#14123a;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 14px 30px -14px rgba(10,5,40,.55),0 0 0 1px rgba(255,255,255,.7) inset;
  opacity:0;
  transform:translateY(-34px) scale(.92);
  transition:opacity .3s ease,transform .55s var(--sa-spring,cubic-bezier(.34,1.56,.64,1));
  pointer-events:none;
}
.tgp__push.is-on { opacity:1; transform:none; }
/* iOS layout: app name and time on top, the text takes the full width below */
.tgp__push img { grid-row:1 / 3; width:30px; height:30px; border-radius:8px; object-fit:cover; background:#fff; }
.tgp__push span { display:contents; }
.tgp__push b { grid-column:2; grid-row:1; font-size:12.5px; line-height:1.3; }
.tgp__push time { grid-column:3; grid-row:1; color:#8d8aa8; font-size:10.5px; }
.tgp__push small { grid-column:2 / 4; grid-row:2; min-width:0; overflow:hidden; color:#47456a; font-size:11.5px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }

/* glass facts and flags of the chosen countries floating around the phone */
.tgp__float {
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 24px 40px -24px rgba(0,0,0,.7);
  animation:tgpFloat 6s ease-in-out infinite;
}
.tgp__float b { display:block; font-size:20px; letter-spacing:-.02em; line-height:1.1; }
.tgp__float small { color:rgba(255,255,255,.75); font-size:12px; }
.tgp__float span { display:grid; }
.tgp__float .icon { width:22px; height:22px; color:#7fd6ff; }
/* beside the phone, overlapping only its frame: the chat stays readable */
.tgp__float--a { right:calc(50% + 152px); bottom:92px; display:grid; gap:2px; max-width:136px; }
.tgp__float--b { left:calc(50% + 152px); top:150px; flex-direction:column; align-items:flex-start; gap:6px; max-width:136px; animation-delay:-3s; }
.tgp__float--b b { font-size:14px; white-space:nowrap; }
@keyframes tgpFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
.tgp__flags { position:absolute; inset:0; z-index:3; pointer-events:none; }
.tgp__flag {
  position:absolute;
  width:46px;
  height:46px;
  padding:4px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 16px 30px -14px rgba(0,0,0,.7);
  animation:tgpFlagIn .6s var(--sa-spring,cubic-bezier(.34,1.56,.64,1)) both,tgpFloat 5.5s ease-in-out infinite;
}
.tgp__flag img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.tgp__flag:nth-child(1) { left:8%; top:16%; animation-delay:0s,-1s; }
.tgp__flag:nth-child(2) { right:6%; bottom:24%; animation-delay:0s,-2.5s; }
.tgp__flag:nth-child(3) { left:14%; bottom:6%; width:38px; height:38px; animation-delay:0s,-4s; }
.tgp__flag:nth-child(4) { right:14%; top:4%; width:36px; height:36px; animation-delay:0s,-1.8s; }
@keyframes tgpFlagIn { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:scale(1); } }

/* responsive */
@media (max-width:1240px) {
  .tgp__card { padding:54px 20px 54px 44px; gap:20px; }
}
@media (min-width:1041px) and (max-width:1200px) {
  .tgp__float { display:none; }  /* the phone column is too narrow: the facts would reach the text or the card edge */
}
@media (max-width:1040px) {
  .tgp__card { grid-template-columns:1fr; gap:34px; padding:48px 36px 40px; }
  .tgp__copy { justify-items:start; }
  .tgp__stage { min-height:600px; }
}
@media (max-width:640px) {
  .tgp { padding:18px 0 10px; }
  .tgp__card { grid-template-columns:minmax(0,1fr); padding:34px 18px 28px; border-radius:28px; gap:26px; min-height:0; }
  .tgp__title { font-size:clamp(30px,8.6vw,38px); }
  .tgp__lead { font-size:15px; }
  .tgp__chip { min-height:34px; padding:5px 12px 5px 6px; font-size:12.5px; }
  .tgp__chip img { width:20px; height:20px; }
  .tgp__steps { grid-template-columns:1fr; gap:10px; }
  .tgp__steps::before { left:17px; right:auto; top:18px; bottom:18px; width:2px; height:auto; background:rgba(255,255,255,.14); animation:none; }
  .tgp__steps li { grid-template-columns:auto 1fr; align-items:center; gap:12px; }
  .tgp__cta { width:100%; }
  .tgp__btn { justify-content:center; width:100%; gap:10px; padding-right:18px; font-size:15px; line-height:1.25; }
  .tgp__stage { min-height:540px; }
  .tgp__phone { width:272px; height:530px; border-radius:48px; }
  .tgp__screen { border-radius:38px; }
  .tgp__rings i { left:-170px; top:-170px; width:340px; height:340px; }
  .tgp__float,.tgp__flags { display:none; }  /* no room beside the phone: they would cover the chat */
}

@media (max-width:360px) {
  .tgp__card { padding:30px 14px 24px; }
  .tgp__stage { min-height:480px; }
  .tgp__phone { width:236px; height:466px; border-radius:42px; padding:9px; }
  .tgp__screen { border-radius:34px; }
  .tgp__push { left:6px; right:6px; padding:8px 10px 8px 8px; gap:1px 7px; }
  .tgp__push img { width:26px; height:26px; }
  .tgp__push small { font-size:10.5px; }
  .tgp__rings i { left:-140px; top:-140px; width:280px; height:280px; }
}

/* motion off: everything still, the chat shows its messages without playing */
@media (prefers-reduced-motion:reduce) {
  .tgp *,.tgp *::before,.tgp *::after { animation:none !important; transition:none !important; }
  .tgp__fly { display:none; }
}

/* the official Telegram logo (telegram.org brand assets): the blue circle with the white plane */
.tgp__tg,.tgp__btn-ico { background:linear-gradient(180deg,#2AABEE 0%,#229ED9 100%); }
.tgp__tg .tg-plane,.tgp__btn-ico .tg-plane { display:block; width:100%; height:100%; }
.tgp__btn:hover .tgp__btn-ico .tg-plane { animation:tgpLaunch .9s cubic-bezier(.5,0,.3,1); }
@media (prefers-reduced-motion:reduce) { .tgp__btn:hover .tgp__btn-ico .tg-plane { animation:none; } }